diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index d6cd8b57..73d2c849 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -44,6 +44,7 @@ --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; + --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --leading-snug: 1.375; @@ -60,7 +61,6 @@ --blur-sm: 8px; --blur-xl: 24px; --blur-2xl: 40px; - --blur-3xl: 64px; --aspect-video: 16 / 9; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -276,8 +276,8 @@ .-start-6 { inset-inline-start: calc(var(--spacing) * -6); } - .-start-\[2\.1rem\] { - inset-inline-start: calc(2.1rem * -1); + .-start-10 { + inset-inline-start: calc(var(--spacing) * -10); } .start-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] { inset-inline-start: calc(max(-50vw, -800px) + 50%); @@ -294,9 +294,6 @@ .end-8 { inset-inline-end: calc(var(--spacing) * 8); } - .-top-40 { - top: calc(var(--spacing) * -40); - } .top-0 { top: 0px; } @@ -336,17 +333,14 @@ .left-1\/2 { left: calc(1 / 2 * 100%); } - .left-\[calc\(50\%-11rem\)\] { - left: calc(50% - 11rem); - } .isolate { isolation: isolate; } .-z-10 { z-index: calc(10 * -1); } - .z-0 { - z-index: 0; + .-z-20 { + z-index: calc(20 * -1); } .z-2 { z-index: 2; @@ -423,9 +417,6 @@ .m-auto { margin: auto; } - .-mx-2 { - margin-inline: calc(var(--spacing) * -2); - } .mx-1 { margin-inline: var(--spacing); } @@ -468,9 +459,6 @@ .ms-auto { margin-inline-start: auto; } - .-me-48 { - margin-inline-end: calc(var(--spacing) * -48); - } .me-1 { margin-inline-end: var(--spacing); } @@ -1164,6 +1152,9 @@ .mt-8 { margin-top: calc(var(--spacing) * 8); } + .mt-9 { + margin-top: calc(var(--spacing) * 9); + } .mt-10 { margin-top: calc(var(--spacing) * 10); } @@ -1230,9 +1221,6 @@ .mb-10 { margin-bottom: calc(var(--spacing) * 10); } - .mb-12 { - margin-bottom: calc(var(--spacing) * 12); - } .mb-14 { margin-bottom: calc(var(--spacing) * 14); } @@ -1305,9 +1293,6 @@ .aspect-\[4\/3\] { aspect-ratio: 4/3; } - .aspect-\[1155\/678\] { - aspect-ratio: 1155/678; - } .aspect-auto { aspect-ratio: auto; } @@ -1369,9 +1354,6 @@ .h-40 { height: calc(var(--spacing) * 40); } - .h-48 { - height: calc(var(--spacing) * 48); - } .h-84 { height: calc(var(--spacing) * 84); } @@ -1384,6 +1366,9 @@ .h-\[150px\] { height: 150px; } + .h-\[640px\] { + height: 640px; + } .h-\[800px\] { height: 800px; } @@ -1408,8 +1393,8 @@ .min-h-0 { min-height: 0px; } - .min-h-\[104px\] { - min-height: 104px; + .min-h-32 { + min-height: calc(var(--spacing) * 32); } .min-h-\[130px\] { min-height: 130px; @@ -1468,9 +1453,6 @@ .w-\[30px\] { width: 30px; } - .w-\[36rem\] { - width: 36rem; - } .w-\[min\(22rem\,calc\(100vw-1\.5rem\)\)\] { width: min(22rem, calc(100vw - 1.5rem)); } @@ -1619,18 +1601,12 @@ .-rotate-90 { rotate: calc(90deg * -1); } - .rotate-\[30deg\] { - rotate: 30deg; - } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .transform\! { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important; } - .transform-gpu { - transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); - } .transform-none { transform: none; } @@ -1659,6 +1635,9 @@ .appearance-none { appearance: none; } + .grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } .grid-rows-\[0fr\] { grid-template-rows: 0fr; } @@ -1686,6 +1665,9 @@ .gap-1 { gap: var(--spacing); } + .gap-1\.5 { + gap: calc(var(--spacing) * 1.5); + } .gap-2 { gap: calc(var(--spacing) * 2); } @@ -1695,6 +1677,9 @@ .gap-4 { gap: calc(var(--spacing) * 4); } + .gap-10 { + gap: calc(var(--spacing) * 10); + } :where(.space-y-2 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); @@ -1906,6 +1891,12 @@ .border-neutral-300 { border-color: rgba(var(--color-neutral-300), 1); } + .border-neutral-300\/80 { + border-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-300), 1), 1) 80%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, rgba(var(--color-neutral-300), 1) 80%, transparent); + } + } .border-primary-200 { border-color: rgba(var(--color-primary-200), 1); } @@ -1993,6 +1984,12 @@ .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)) { @@ -2017,18 +2014,24 @@ background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 25%, transparent); } } - .bg-neutral\/40 { - background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral), 1), 1) 40%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 40%, 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)) { background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 50%, transparent); } } + .bg-neutral\/60 { + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral), 1), 1) 60%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 60%, transparent); + } + } + .bg-neutral\/75 { + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral), 1), 1) 75%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 75%, transparent); + } + } .bg-neutral\/85 { background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral), 1), 1) 85%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -2041,12 +2044,6 @@ background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 95%, transparent); } } - .bg-primary-50\/70 { - background-color: color-mix(in srgb, rgba(rgba(var(--color-primary-50), 1), 1) 70%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, rgba(var(--color-primary-50), 1) 70%, transparent); - } - } .bg-primary-100 { background-color: rgba(var(--color-primary-100), 1); } @@ -2071,8 +2068,8 @@ .bg-white { background-color: #fff; } - .bg-white\/80 { - background-color: color-mix(in oklab, #fff 80%, transparent); + .bg-white\/60 { + background-color: color-mix(in oklab, #fff 60%, transparent); } .bg-linear-60 { --tw-gradient-position: 60deg; @@ -2093,10 +2090,6 @@ --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } - .bg-gradient-to-tr { - --tw-gradient-position: to top right in oklab; - background-image: linear-gradient(var(--tw-gradient-stops)); - } .bg-none { background-image: none; } @@ -2104,10 +2097,6 @@ --tw-gradient-from: rgba(var(--color-neutral), 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)); } - .from-primary-400 { - --tw-gradient-from: rgba(var(--color-primary-400), 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)); - } .from-primary-500 { --tw-gradient-from: rgba(var(--color-primary-500), 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)); @@ -2123,10 +2112,6 @@ --tw-gradient-to: rgba(var(--color-neutral-100), 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)); } - .to-secondary-500 { - --tw-gradient-to: rgba(var(--color-secondary-500), 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)); - } .to-secondary-600 { --tw-gradient-to: rgba(var(--color-secondary-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)); @@ -2210,6 +2195,9 @@ .px-\[30px\] { padding-inline: 30px; } + .py-0\.5 { + padding-block: calc(var(--spacing) * 0.5); + } .py-1 { padding-block: var(--spacing); } @@ -2234,12 +2222,18 @@ .py-10 { padding-block: calc(var(--spacing) * 10); } + .py-12 { + padding-block: calc(var(--spacing) * 12); + } .py-16 { padding-block: calc(var(--spacing) * 16); } .py-20 { padding-block: calc(var(--spacing) * 20); } + .py-24 { + padding-block: calc(var(--spacing) * 24); + } .py-\[0\.4rem\] { padding-block: 0.4rem; } @@ -2276,9 +2270,6 @@ .pt-12 { padding-top: calc(var(--spacing) * 12); } - .pt-16 { - padding-top: calc(var(--spacing) * 16); - } .pr-8 { padding-right: calc(var(--spacing) * 8); } @@ -2297,9 +2288,6 @@ .pb-16 { padding-bottom: calc(var(--spacing) * 16); } - .pb-32 { - padding-bottom: calc(var(--spacing) * 32); - } .pl-0 { padding-left: 0px; } @@ -2333,6 +2321,9 @@ .align-top { vertical-align: top; } + .font-sans { + font-family: var(--font-sans); + } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); @@ -2372,6 +2363,9 @@ .text-\[0\.6rem\] { font-size: 0.6rem; } + .text-\[16rem\] { + font-size: 16rem; + } .leading-3 { --tw-leading: calc(var(--spacing) * 3); line-height: calc(var(--spacing) * 3); @@ -2384,10 +2378,22 @@ --tw-leading: calc(var(--spacing) * 7); line-height: calc(var(--spacing) * 7); } + .leading-8 { + --tw-leading: calc(var(--spacing) * 8); + line-height: calc(var(--spacing) * 8); + } + .leading-\[1\.05\] { + --tw-leading: 1.05; + line-height: 1.05; + } .leading-\[1\.6\] { --tw-leading: 1.6; line-height: 1.6; } + .leading-none { + --tw-leading: 1; + line-height: 1; + } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); @@ -2420,10 +2426,18 @@ --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } + .tracking-\[0\.15em\] { + --tw-tracking: 0.15em; + letter-spacing: 0.15em; + } .tracking-\[0\.18em\] { --tw-tracking: 0.18em; letter-spacing: 0.18em; } + .tracking-\[0\.25em\] { + --tw-tracking: 0.25em; + letter-spacing: 0.25em; + } .tracking-normal { --tw-tracking: var(--tracking-normal); letter-spacing: var(--tracking-normal); @@ -2432,6 +2446,10 @@ --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } + .tracking-tighter { + --tw-tracking: var(--tracking-tighter); + letter-spacing: var(--tracking-tighter); + } .text-balance { text-wrap: balance; } @@ -2484,6 +2502,12 @@ .text-neutral-900 { color: rgba(var(--color-neutral-900), 1); } + .text-neutral-900\/5 { + color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 5%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 5%, transparent); + } + } .text-primary-100 { color: rgba(var(--color-primary-100), 1); } @@ -2578,9 +2602,6 @@ .opacity-0 { opacity: 0%; } - .opacity-20 { - opacity: 20%; - } .opacity-30 { opacity: 30%; } @@ -2634,6 +2655,18 @@ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .shadow-neutral-900\/5 { + --tw-shadow-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 5%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, rgba(var(--color-neutral-900), 1) 5%, transparent) var(--tw-shadow-alpha), transparent); + } + } + .shadow-neutral-900\/20 { + --tw-shadow-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, rgba(var(--color-neutral-900), 1) 20%, transparent) var(--tw-shadow-alpha), transparent); + } + } .shadow-primary-500\/20 { --tw-shadow-color: color-mix(in srgb, rgba(rgba(var(--color-primary-500), 1), 1) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -2658,10 +2691,6 @@ --tw-blur: blur(8px) !important; filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important; } - .blur-3xl { - --tw-blur: blur(var(--blur-3xl)); - filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); - } .drop-shadow { --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06))); --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06)); @@ -2677,11 +2706,6 @@ .filter\! { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important; } - .backdrop-blur { - --tw-backdrop-blur: blur(8px); - -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-blur-2xl { --tw-backdrop-blur: blur(var(--blur-2xl)); -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,); @@ -2769,9 +2793,9 @@ --tw-duration: 300ms; transition-duration: 300ms; } - .duration-500 { - --tw-duration: 500ms; - transition-duration: 500ms; + .duration-700 { + --tw-duration: 700ms; + transition-duration: 700ms; } .duration-\[350ms\] { --tw-duration: 350ms; @@ -2785,6 +2809,10 @@ --tw-ease: cubic-bezier(0,0,0.15,1), cubic-bezier(0,0,0.15,1); transition-timing-function: cubic-bezier(0,0,0.15,1), cubic-bezier(0,0,0.15,1); } + .ease-\[cubic-bezier\(0\.22\,1\,0\.36\,1\)\] { + --tw-ease: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); + } .ease-\[cubic-bezier\(0\.25\,0\.1\,0\.25\,1\.0\)\] { --tw-ease: cubic-bezier(0.25,0.1,0.25,1.0); transition-timing-function: cubic-bezier(0.25,0.1,0.25,1.0); @@ -2831,11 +2859,8 @@ --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } - .group-hover\:scale-110:is(:where(.group):hover *) { - --tw-scale-x: 110%; - --tw-scale-y: 110%; - --tw-scale-z: 110%; - scale: var(--tw-scale-x) var(--tw-scale-y); + .group-hover\:scale-\[1\.03\]:is(:where(.group):hover *) { + scale: 1.03; } .group-hover\:text-primary-500:is(:where(.group):hover *) { color: rgba(var(--color-primary-500), 1); @@ -3102,33 +3127,21 @@ } } @media (width >= 640px) { - .sm\:-top-80 { - top: calc(var(--spacing) * -80); - } .sm\:top-5 { top: calc(var(--spacing) * 5); } - .sm\:left-\[calc\(50\%-30rem\)\] { - left: calc(50% - 30rem); - } .sm\:me-7 { margin-inline-end: calc(var(--spacing) * 7); } - .sm\:mt-16 { - margin-top: calc(var(--spacing) * 16); - } .sm\:mb-0 { margin-bottom: 0px; } - .sm\:w-1\/2 { - width: calc(1 / 2 * 100%); - } - .sm\:w-\[72rem\] { - width: 72rem; - } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .sm\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } .sm\:flex-row { flex-direction: row; } @@ -3144,15 +3157,15 @@ .sm\:p-6 { padding: calc(var(--spacing) * 6); } - .sm\:p-8 { - padding: calc(var(--spacing) * 8); - } .sm\:px-6 { padding-inline: calc(var(--spacing) * 6); } .sm\:px-14 { padding-inline: calc(var(--spacing) * 14); } + .sm\:py-16 { + padding-block: calc(var(--spacing) * 16); + } .sm\:py-24 { padding-block: calc(var(--spacing) * 24); } @@ -3165,6 +3178,10 @@ .sm\:text-center { text-align: center; } + .sm\:text-2xl { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } .sm\:text-7xl { font-size: var(--text-7xl); line-height: var(--tw-leading, var(--text-7xl--line-height)); @@ -3173,14 +3190,18 @@ font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } + .sm\:text-\[26rem\] { + font-size: 26rem; + } + .sm\:leading-9 { + --tw-leading: calc(var(--spacing) * 9); + line-height: calc(var(--spacing) * 9); + } .sm\:last\:me-0:last-child { margin-inline-end: 0px; } } @media (width >= 853px) { - .md\:-me-16 { - margin-inline-end: calc(var(--spacing) * -16); - } .md\:mt-0 { margin-top: 0px; } @@ -3199,15 +3220,15 @@ .md\:h-\[200px\] { height: 200px; } - .md\:w-1\/3 { - width: calc(1 / 3 * 100%); - } .md\:w-auto { width: auto; } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .md\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } .md\:flex-row { flex-direction: row; } @@ -3222,12 +3243,6 @@ } } @media (width >= 1024px) { - .lg\:absolute { - position: absolute; - } - .lg\:relative { - position: relative; - } .lg\:sticky { position: sticky; } @@ -3240,54 +3255,27 @@ .lg\:order-last { order: 9999; } - .lg\:m-0 { - margin: 0px; - } .lg\:mx-0 { margin-inline: 0px; } - .lg\:mx-auto { - margin-inline: auto; - } .lg\:ms-auto { margin-inline-start: auto; } - .lg\:mt-0 { - margin-top: 0px; - } .lg\:block { display: block; } - .lg\:grid { - display: grid; - } .lg\:hidden { display: none; } .lg\:h-72 { height: calc(var(--spacing) * 72); } - .lg\:h-full { - height: 100%; - } - .lg\:w-1\/4 { - width: calc(1 / 4 * 100%); - } - .lg\:w-auto { - width: auto; - } .lg\:max-w-2xs { max-width: var(--container-2xs); } - .lg\:max-w-7xl { - max-width: var(--container-7xl); - } .lg\:max-w-none { max-width: none; } - .lg\:grid-flow-col-dense { - grid-auto-flow: column dense; - } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -3300,24 +3288,18 @@ .lg\:flex-row { flex-direction: row; } - .lg\:gap-24 { - gap: calc(var(--spacing) * 24); + .lg\:gap-16 { + gap: calc(var(--spacing) * 16); } .lg\:p-\[12vh\] { padding: 12vh; } - .lg\:px-0 { - padding-inline: 0px; - } .lg\:px-8 { padding-inline: calc(var(--spacing) * 8); } .lg\:px-32 { padding-inline: calc(var(--spacing) * 32); } - .lg\:py-16 { - padding-block: calc(var(--spacing) * 16); - } .lg\:py-32 { padding-block: calc(var(--spacing) * 32); } @@ -3326,12 +3308,12 @@ } } @media (width >= 1280px) { - .xl\:w-1\/4 { - width: calc(1 / 4 * 100%); - } .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .xl\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } } @media (width >= 1536px) { .\32 xl\:grid-cols-5 { @@ -3374,6 +3356,12 @@ .dark\:border-neutral-600:is(.dark *) { border-color: rgba(var(--color-neutral-600), 1); } + .dark\:border-neutral-600\/80:is(.dark *) { + border-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-600), 1), 1) 80%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, rgba(var(--color-neutral-600), 1) 80%, transparent); + } + } .dark\:border-neutral-700:is(.dark *) { border-color: rgba(var(--color-neutral-700), 1); } @@ -3398,12 +3386,6 @@ .dark\:border-primary-900:is(.dark *) { border-color: rgba(var(--color-primary-900), 1); } - .dark\:border-primary-900\/70:is(.dark *) { - border-color: color-mix(in srgb, rgba(rgba(var(--color-primary-900), 1), 1) 70%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, rgba(var(--color-primary-900), 1) 70%, transparent); - } - } .dark\:border-secondary-600:is(.dark *) { border-color: rgba(var(--color-secondary-600), 1); } @@ -3503,24 +3485,12 @@ .dark\:bg-neutral-900:is(.dark *) { background-color: rgba(var(--color-neutral-900), 1); } - .dark\:bg-neutral-900\/30:is(.dark *) { - background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 30%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 30%, transparent); - } - } .dark\:bg-neutral-900\/50:is(.dark *) { background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 50%, transparent); } } - .dark\:bg-neutral-900\/80:is(.dark *) { - background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 80%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 80%, transparent); - } - } .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)) { @@ -3603,6 +3573,9 @@ .dark\:text-white:is(.dark *) { color: #fff; } + .dark\:text-white\/5:is(.dark *) { + color: color-mix(in oklab, #fff 5%, transparent); + } .dark\:opacity-60:is(.dark *) { opacity: 60%; } @@ -3653,6 +3626,9 @@ display: none; } } + .\[\&_\.p-4\]\:p-3 .p-4 { + padding: calc(var(--spacing) * 3); + } .\[\&_\.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; @@ -3665,6 +3641,16 @@ font-size: var(--text-base) !important; line-height: var(--tw-leading, var(--text-base--line-height)) !important; } + .\[\&_h2\]\:text-base h2 { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + } + .\[\&_img\.logo\]\:max-h-10 img.logo { + max-height: calc(var(--spacing) * 10); + } + .\[\&_img\.logo\]\:max-w-10 img.logo { + max-width: calc(var(--spacing) * 10); + } .\[\&_span\]\:text-2xl span { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); @@ -4540,6 +4526,39 @@ body a, body button { transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } +@keyframes landing-rise { + from { + opacity: 0; + transform: translateY(0.9rem); + } + to { + opacity: 1; + transform: translateY(0); + } +} +.landing-rise { + animation: landing-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; +} +.landing-rise-1 { + animation-delay: 90ms; +} +.landing-rise-2 { + animation-delay: 180ms; +} +.landing-rise-3 { + animation-delay: 270ms; +} +.landing-rise-4 { + animation-delay: 360ms; +} +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto !important; + } + .landing-rise, .landing-rise-1, .landing-rise-2, .landing-rise-3, .landing-rise-4 { + animation: none; + } +} button, [role="button"] { cursor: pointer; } @@ -4688,6 +4707,71 @@ pre { width: 100%; height: 100%; } +@page { + margin: 2cm; +} +@media print { + html { + color-scheme: light only; + } + body { + background: #fff !important; + color: #111 !important; + max-width: none !important; + padding: 0 !important; + } + body > header, #background-canvas, .single_hero_background, #scroll-to-top, #bmc-wbtn { + display: none !important; + } + * { + box-shadow: none !important; + text-shadow: none !important; + } + main, article, .prose, .prose *:not(pre):not(pre *) { + color: #111 !important; + background: transparent !important; + } + pre, pre * { + background: #f4f4f5 !important; + color: #111 !important; + white-space: pre-wrap !important; + } + a { + text-decoration: underline; + } + .prose a[href^="http"]::after { + content: " (" attr(href) ")"; + font-size: 0.85em; + color: #555; + word-break: break-all; + } + pre, blockquote, table, figure, img { + break-inside: avoid; + } + h1, h2, h3, h4 { + break-after: avoid; + } + img { + max-width: 100% !important; + } +} +.hero-canvas-fade { + -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 92%); + mask-image: linear-gradient(to bottom, black 20%, transparent 92%); +} +@media (min-width: 640px) and (max-width: 1023.98px) { + .grid-balance > :last-child:nth-child(odd) { + grid-column: 1 / -1; + } +} +@media (min-width: 1024px) { + .grid-balance-3 > :last-child:nth-child(3n + 1) { + grid-column: 1 / -1; + } + .grid-balance-4 > :last-child:nth-child(4n + 1) { + grid-column: 1 / -1; + } +} .thumbnail_card { aspect-ratio: var(--thumbnail-aspect-ratio, 1.5); height: auto; @@ -4822,11 +4906,15 @@ body:has(#mobile-menu-toggle:checked) { .menuhide { position: absolute; z-index: 1000; - white-space: nowrap; + width: max-content; + max-width: min(20rem, calc(100vw - 2rem)); opacity: 0; visibility: hidden; transition: visibility 0.3s, opacity 0.3s ease-in-out; } +.nested-menu:nth-last-child(-n + 3) .menuhide { + inset-inline-end: 0; +} .nested-menu:hover .menuhide, .nested-menu:focus-within .menuhide { opacity: 1; visibility: visible; diff --git a/assets/css/main.css b/assets/css/main.css index ee00c408..3a4f560b 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -23,6 +23,53 @@ body button { @apply transition-colors; } +/* Staggered entrance for the landing homepage hero. Removed entirely when a + visitor requests reduced motion. */ +@keyframes landing-rise { + from { + opacity: 0; + transform: translateY(0.9rem); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.landing-rise { + animation: landing-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; +} + +.landing-rise-1 { + animation-delay: 90ms; +} + +.landing-rise-2 { + animation-delay: 180ms; +} + +.landing-rise-3 { + animation-delay: 270ms; +} + +.landing-rise-4 { + animation-delay: 360ms; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto !important; + } + + .landing-rise, + .landing-rise-1, + .landing-rise-2, + .landing-rise-3, + .landing-rise-4 { + animation: none; + } +} + button, [role="button"] { cursor: pointer; @@ -181,6 +228,101 @@ pre { height: 100%; } +/* ---- Print ---- */ +@page { + margin: 2cm; +} + +@media print { + html { + color-scheme: light only; + } + body { + background: #fff !important; + color: #111 !important; + max-width: none !important; + padding: 0 !important; + } + + /* Site chrome that makes no sense on paper */ + body > header, + #background-canvas, + .single_hero_background, + #scroll-to-top, + #bmc-wbtn { + display: none !important; + } + + /* Flatten decoration; dark mode prints light */ + * { + box-shadow: none !important; + text-shadow: none !important; + } + main, + article, + .prose, + .prose *:not(pre):not(pre *) { + color: #111 !important; + background: transparent !important; + } + pre, + pre * { + background: #f4f4f5 !important; + color: #111 !important; + white-space: pre-wrap !important; + } + + /* Links stay useful on paper */ + a { + text-decoration: underline; + } + .prose a[href^="http"]::after { + content: " (" attr(href) ")"; + font-size: 0.85em; + color: #555; + word-break: break-all; + } + + /* Sensible page flow */ + pre, + blockquote, + table, + figure, + img { + break-inside: avoid; + } + h1, + h2, + h3, + h4 { + break-after: avoid; + } + img { + max-width: 100% !important; + } +} + +/* Background hero: feature image dissolves into the global background */ +.hero-canvas-fade { + -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 92%); + mask-image: linear-gradient(to bottom, black 20%, transparent 92%); +} + +/* Shortcode grids: a lone trailing card stretches across the full row */ +@media (min-width: 640px) and (max-width: 1023.98px) { + .grid-balance > :last-child:nth-child(odd) { + grid-column: 1 / -1; + } +} +@media (min-width: 1024px) { + .grid-balance-3 > :last-child:nth-child(3n + 1) { + grid-column: 1 / -1; + } + .grid-balance-4 > :last-child:nth-child(4n + 1) { + grid-column: 1 / -1; + } +} + .thumbnail_card { aspect-ratio: var(--thumbnail-aspect-ratio, 1.5); height: auto; @@ -332,7 +474,8 @@ body:has(#mobile-menu-toggle:checked) { .menuhide { position: absolute; z-index: 1000; - white-space: nowrap; + width: max-content; + max-width: min(20rem, calc(100vw - 2rem)); opacity: 0; visibility: hidden; @@ -342,6 +485,11 @@ body:has(#mobile-menu-toggle:checked) { opacity 0.3s ease-in-out; } +/* Dropdowns near the end of the bar open leftward so they stay on screen */ +.nested-menu:nth-last-child(-n + 3) .menuhide { + inset-inline-end: 0; +} + .nested-menu:hover .menuhide, .nested-menu:focus-within .menuhide { opacity: 1; diff --git a/assets/css/schemes/burufugu.css b/assets/css/schemes/burufugu.css new file mode 100644 index 00000000..d22b854d --- /dev/null +++ b/assets/css/schemes/burufugu.css @@ -0,0 +1,37 @@ +/* Burufugu scheme — the mascot's own palette: sky-blue fish, coral glow, indigo night */ +:root { + --color-neutral: 255, 255, 255; + /* Indigo night */ + --color-neutral-50: 246, 247, 252; + --color-neutral-100: 238, 240, 249; + --color-neutral-200: 221, 224, 240; + --color-neutral-300: 195, 200, 226; + --color-neutral-400: 141, 148, 189; + --color-neutral-500: 98, 106, 150; + --color-neutral-600: 70, 78, 122; + --color-neutral-700: 48, 55, 97; + --color-neutral-800: 26, 33, 74; + --color-neutral-900: 13, 18, 51; + /* Sky blue (logo) */ + --color-primary-50: 240, 247, 254; + --color-primary-100: 224, 239, 254; + --color-primary-200: 186, 222, 253; + --color-primary-300: 138, 197, 250; + --color-primary-400: 96, 172, 246; + --color-primary-500: 74, 158, 240; + --color-primary-600: 52, 126, 219; + --color-primary-700: 42, 98, 189; + --color-primary-800: 38, 76, 152; + --color-primary-900: 30, 58, 110; + /* Coral */ + --color-secondary-50: 255, 246, 240; + --color-secondary-100: 255, 234, 222; + --color-secondary-200: 255, 211, 187; + --color-secondary-300: 255, 180, 142; + --color-secondary-400: 255, 138, 92; + --color-secondary-500: 240, 112, 90; + --color-secondary-600: 217, 87, 74; + --color-secondary-700: 184, 64, 58; + --color-secondary-800: 148, 50, 50; + --color-secondary-900: 118, 40, 44; +} diff --git a/assets/icons/shirt.svg b/assets/icons/shirt.svg new file mode 100644 index 00000000..90da5306 --- /dev/null +++ b/assets/icons/shirt.svg @@ -0,0 +1 @@ + diff --git a/assets/js/hero-scroll-fade.js b/assets/js/hero-scroll-fade.js new file mode 100644 index 00000000..af11c5fb --- /dev/null +++ b/assets/js/hero-scroll-fade.js @@ -0,0 +1,24 @@ +(function () { + var script = document.currentScript; + var target = document.getElementById(script.getAttribute("data-hero-id")); + if (!target) return; + var distance = parseInt(script.getAttribute("data-fade-distance"), 10) || 500; + var ticking = false; + function update() { + ticking = false; + var opacity = Math.max(0, 1 - window.scrollY / distance); + target.style.opacity = opacity; + target.style.visibility = opacity === 0 ? "hidden" : "visible"; + } + window.addEventListener( + "scroll", + function () { + if (!ticking) { + ticking = true; + requestAnimationFrame(update); + } + }, + { passive: true } + ); + update(); +})(); diff --git a/assets/js/layout-switcher.js b/assets/js/layout-switcher.js new file mode 100644 index 00000000..c156d655 --- /dev/null +++ b/assets/js/layout-switcher.js @@ -0,0 +1,55 @@ +(function () { + "use strict"; + + function initLayoutSwitcher() { + document.querySelectorAll("[data-layout-switcher]").forEach(function (lab) { + var buttons = Array.prototype.slice.call(lab.querySelectorAll("[data-layout-switcher-button]")); + var panels = lab.querySelectorAll("[data-layout-switcher-panel]"); + + var activate = function (layout, focusTab) { + buttons.forEach(function (button) { + var active = button.dataset.layoutSwitcherButton === layout; + button.setAttribute("aria-selected", String(active)); + button.setAttribute("tabindex", active ? "0" : "-1"); + button.classList.toggle("border-primary-600", active); + button.classList.toggle("bg-primary-600", active); + button.classList.toggle("text-white", active); + button.classList.toggle("dark:border-primary-500", active); + button.classList.toggle("dark:bg-primary-500", active); + if (active && focusTab) button.focus(); + }); + panels.forEach(function (panel) { + panel.hidden = panel.dataset.layoutSwitcherPanel !== layout; + }); + }; + + buttons.forEach(function (button, index) { + button.addEventListener("click", function () { + activate(button.dataset.layoutSwitcherButton, false); + }); + button.addEventListener("keydown", function (event) { + var target = null; + if (event.key === "ArrowRight") { + target = buttons[(index + 1) % buttons.length]; + } else if (event.key === "ArrowLeft") { + target = buttons[(index - 1 + buttons.length) % buttons.length]; + } else if (event.key === "Home") { + target = buttons[0]; + } else if (event.key === "End") { + target = buttons[buttons.length - 1]; + } + if (target) { + event.preventDefault(); + activate(target.dataset.layoutSwitcherButton, true); + } + }); + }); + }); + } + + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", initLayoutSwitcher); + } else { + initLayoutSwitcher(); + } +})(); diff --git a/assets/js/menu-a11y.js b/assets/js/menu-a11y.js new file mode 100644 index 00000000..8aeef7af --- /dev/null +++ b/assets/js/menu-a11y.js @@ -0,0 +1,89 @@ +(function () { + "use strict"; + + function syncCheckboxLabels(checkbox) { + var expanded = checkbox.checked ? "true" : "false"; + document.querySelectorAll('label[role="button"][for="' + checkbox.id + '"]').forEach(function (label) { + label.setAttribute("aria-expanded", expanded); + }); + } + + function setupCheckboxLabels() { + var seen = {}; + document.querySelectorAll('label[role="button"][for]').forEach(function (label) { + var checkbox = document.getElementById(label.getAttribute("for")); + if (!checkbox || checkbox.type !== "checkbox") return; + + // Enter/Space activates the label like a real button + label.addEventListener("keydown", function (event) { + if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") { + event.preventDefault(); + label.click(); + } + }); + + if (!seen[checkbox.id]) { + seen[checkbox.id] = true; + checkbox.addEventListener("change", function () { + syncCheckboxLabels(checkbox); + }); + syncCheckboxLabels(checkbox); + } + }); + } + + function setupMobileMenuEscape() { + var toggle = document.getElementById("mobile-menu-toggle"); + if (!toggle) return; + document.addEventListener("keydown", function (event) { + if (event.key === "Escape" && toggle.checked) { + toggle.checked = false; + syncCheckboxLabels(toggle); + var opener = document.querySelector('label[role="button"][for="mobile-menu-toggle"]'); + if (opener) opener.focus(); + } + }); + } + + function setupDesktopDropdowns() { + document.querySelectorAll(".nested-menu").forEach(function (menu) { + var trigger = menu.querySelector("[aria-haspopup]"); + if (!trigger) return; + var setExpanded = function (expanded) { + trigger.setAttribute("aria-expanded", expanded ? "true" : "false"); + }; + menu.addEventListener("mouseenter", function () { + setExpanded(true); + }); + menu.addEventListener("mouseleave", function () { + setExpanded(false); + }); + menu.addEventListener("focusin", function () { + setExpanded(true); + }); + menu.addEventListener("focusout", function (event) { + if (!menu.contains(event.relatedTarget)) setExpanded(false); + }); + menu.addEventListener("keydown", function (event) { + if (event.key === "Escape") { + if (document.activeElement && menu.contains(document.activeElement)) { + document.activeElement.blur(); + } + setExpanded(false); + } + }); + }); + } + + function init() { + setupCheckboxLabels(); + setupMobileMenuEscape(); + setupDesktopDropdowns(); + } + + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", init); + } else { + init(); + } +})(); diff --git a/assets/js/search.js b/assets/js/search.js index 18a65e65..f7735dcb 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -11,6 +11,7 @@ var last = output.lastChild; var searchVisible = false; var indexed = false; var hasResults = false; +var previouslyFocused = null; // Listen for events showButton ? showButton.addEventListener("click", displaySearch) : null; @@ -22,6 +23,11 @@ modal.addEventListener("click", function (event) { event.stopImmediatePropagation(); return false; }); +const shortcutHint = document.getElementById("search-shortcut-hint"); +if (shortcutHint && !/Mac|iPhone|iPad/.test(navigator.platform)) { + shortcutHint.textContent = "Ctrl K"; +} + document.addEventListener("keydown", function (event) { // Forward slash to open search wrapper if (event.key == "/") { @@ -35,11 +41,40 @@ document.addEventListener("keydown", function (event) { } } + // Cmd+K (macOS) / Ctrl+K to toggle search wrapper + if (event.key.toLowerCase() == "k" && (event.metaKey || event.ctrlKey)) { + event.preventDefault(); + if (searchVisible) { + hideSearch(); + } else { + displaySearch(); + } + } + // Esc to close search wrapper if (event.key == "Escape") { hideSearch(); } + // Trap Tab / Shift+Tab focus inside the modal while it is open + if (event.key == "Tab" && searchVisible) { + var focusable = modal.querySelectorAll('a[href], button, input, [tabindex="0"]'); + if (focusable.length > 0) { + var firstFocusable = focusable[0]; + var lastFocusable = focusable[focusable.length - 1]; + if (!modal.contains(document.activeElement)) { + event.preventDefault(); + firstFocusable.focus(); + } else if (event.shiftKey && document.activeElement == firstFocusable) { + event.preventDefault(); + lastFocusable.focus(); + } else if (!event.shiftKey && document.activeElement == lastFocusable) { + event.preventDefault(); + firstFocusable.focus(); + } + } + } + // Down arrow to move down results list if (event.key == "ArrowDown") { if (searchVisible && hasResults) { @@ -91,6 +126,7 @@ function displaySearch() { buildIndex(); } if (!searchVisible) { + previouslyFocused = document.activeElement; document.body.style.overflow = "hidden"; wrapper.style.visibility = "visible"; input.focus(); @@ -104,7 +140,12 @@ function hideSearch() { wrapper.style.visibility = "hidden"; input.value = ""; output.innerHTML = ""; - document.activeElement.blur(); + if (previouslyFocused && typeof previouslyFocused.focus === "function" && document.contains(previouslyFocused)) { + previouslyFocused.focus(); + } else if (document.activeElement) { + document.activeElement.blur(); + } + previouslyFocused = null; searchVisible = false; } } diff --git a/data/quotes404.json b/data/quotes404.json new file mode 100644 index 00000000..760b24bb --- /dev/null +++ b/data/quotes404.json @@ -0,0 +1,11 @@ +[ + { "line": "You shall not pass!", "source": "The Fellowship of the Ring (2001)" }, + { "line": "These aren't the droids you're looking for.", "source": "Star Wars (1977)" }, + { "line": "Toto, I've a feeling we're not in Kansas anymore.", "source": "The Wizard of Oz (1939)" }, + { "line": "Houston, we have a problem.", "source": "Apollo 13 (1995)" }, + { "line": "Roads? Where we're going, we don't need roads.", "source": "Back to the Future (1985)" }, + { "line": "It's just a flesh wound.", "source": "Monty Python and the Holy Grail (1975)" }, + { "line": "I'll be back.", "source": "The Terminator (1984)" }, + { "line": "You're gonna need a bigger boat.", "source": "Jaws (1975)" }, + { "line": "E.T. phone home.", "source": "E.T. the Extra-Terrestrial (1982)" } +] diff --git a/i18n/en.yaml b/i18n/en.yaml index 777fd947..d3e44887 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -49,6 +49,7 @@ error: 404_title: "Page Not Found :confused:" 404_error: "Error 404" 404_description: "It seems that the page you've requested does not exist." + 404_home: "Take me home" footer: dark_appearance: "Switch to dark appearance" @@ -60,12 +61,16 @@ list: no_articles: "There are no articles to list here yet." nav: + close_menu: "Close menu" + footer_menu: "Footer menu" main_menu: "Main menu" + mobile_menu: "Mobile menu" scroll_to_top_title: "Scroll to top" skip_to_main: "Skip to main content" + toggle_submenu: "Toggle submenu" search: - open_button_title: "Search (/)" + open_button_title: "Search (/ or ⌘K)" close_button_title: "Close (Esc)" input_placeholder: "Search" diff --git a/layouts/404.html b/layouts/404.html index e73c98ce..5e778822 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,9 +1,47 @@ {{ define "main" }} -

{{ i18n "error.404_title" | emojify }}

-

- {{ i18n "error.404_error" | emojify }} -

-
-

{{ i18n "error.404_description" | emojify }}

-
+
+ + +

+ {{ i18n "error.404_error" | emojify }} +

+

+ {{ i18n "error.404_title" | emojify }} +

+ +
+
+

+ {{ i18n "error.404_description" | emojify }} +

+
+ +
+ +
+ {{ partial "cta-button.html" (dict "url" site.Home.RelPermalink "label" (i18n "error.404_home")) }} +
+ + {{ with hugo.Data.quotes404 }} + {{ $json := . | jsonify }} + + {{ end }} +
{{ end }} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 4bbe6121..a53a4df0 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -39,18 +39,55 @@ {{- partial "search.html" . -}} {{ end }} + {{/* Rendered after the main block so page heroes that paint their own + fixed background can suppress the site-wide canvas for their page. + The layer is fixed, so its position in the DOM has no visual effect. */}} + {{ if and (site.Params.backgroundCanvas | default false) (not (.Store.Get "suppressBackgroundCanvas")) }} + {{ $default := site.Store.Get "defaultBackgroundImage" }} + {{ $canvasURL := $default.url }} + {{ if not $canvasURL }} + {{ with $default.obj }}{{ $canvasURL = .RelPermalink }}{{ end }} + {{ end }} + {{ with $canvasURL }} + + {{ end }} + {{ end }} {{ if site.Params.buymeacoffee.globalWidget | default false }} - + {{/* Inject the third-party widget after the page is idle so it never + competes with rendering-critical resources. */}} + {{ end }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 55e5cb30..63c0d47c 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -28,7 +28,7 @@ {{/* Description (markdown content) */}} {{ $tocMargin := cond $showToc "mt-12" "mt-0" }} - {{ $topClass := cond (hasPrefix site.Params.header.layout "fixed") "lg:top-[140px]" "lg:top-10" }} + {{ $topClass := cond (or (hasPrefix site.Params.header.layout "fixed") (eq site.Params.header.layout "floating")) "lg:top-[140px]" "lg:top-10" }}
{{ if $showToc }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 50b932f9..cc0f53a2 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -41,7 +41,7 @@ {{ $enableToc := site.Params.article.showTableOfContents | default false }} {{ $enableToc = .Params.showTableOfContents | default $enableToc }} {{ $showToc := and $enableToc (in .TableOfContents "
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html index f34cee1b..66ffbe38 100644 --- a/layouts/_default/terms.html +++ b/layouts/_default/terms.html @@ -36,7 +36,7 @@
{{ else }} -
+
{{ range .Data.Terms }} {{ partial "term-link/text.html" . }} {{ end }} diff --git a/layouts/index.html b/layouts/index.html index 5389dafe..a93b93ab 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,8 +1,6 @@ {{ define "main" }} {{ if .Site.Params.homepage.layoutSwitcher | default false }} {{ partial "home/layout-switcher.html" . }} - {{ $jsHome := resources.Get "js/home.js" | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }} - {{ else }} {{ $partial := print "home/" .Site.Params.homepage.layout ".html" }} {{ if templates.Exists ( printf "partials/%s" $partial ) }} diff --git a/layouts/partials/article-link/_shortcode.html b/layouts/partials/article-link/_shortcode.html index c3c1c292..39f776db 100644 --- a/layouts/partials/article-link/_shortcode.html +++ b/layouts/partials/article-link/_shortcode.html @@ -98,7 +98,7 @@ loading="lazy" decoding="async" fetchpriority="low" - class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}" + class="not-prose absolute inset-0 h-full w-full object-cover transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] {{ if $featureImageHover }}group-hover:scale-[1.03]{{ end }}" {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} /> {{ end }} diff --git a/layouts/partials/article-link/card-related.html b/layouts/partials/article-link/card-related.html index 705ed290..a1bd1491 100644 --- a/layouts/partials/article-link/card-related.html +++ b/layouts/partials/article-link/card-related.html @@ -74,7 +74,7 @@ loading="lazy" decoding="async" fetchpriority="low" - class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}" + class="not-prose absolute inset-0 h-full w-full object-cover transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] {{ if $featureImageHover }}group-hover:scale-[1.03]{{ end }}" {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} /> {{ end }} diff --git a/layouts/partials/article-link/card.html b/layouts/partials/article-link/card.html index 266cdd5d..f599dab6 100644 --- a/layouts/partials/article-link/card.html +++ b/layouts/partials/article-link/card.html @@ -67,7 +67,7 @@
+ class="article-link--card group relative min-h-full min-w-full overflow-hidden rounded-lg border border-neutral-300/80 bg-white/60 backdrop-blur-xl dark:border-neutral-600/80 dark:bg-neutral-900/50"> {{ with $featuredURL }}
{{ end }} diff --git a/layouts/partials/article-link/simple.html b/layouts/partials/article-link/simple.html index 08b60871..5c54b2c9 100644 --- a/layouts/partials/article-link/simple.html +++ b/layouts/partials/article-link/simple.html @@ -91,7 +91,7 @@ loading="lazy" decoding="async" fetchpriority="low" - class="not-prose absolute inset-0 h-full w-full object-cover transition duration-500 {{ if $featureImageHover }}group-hover:scale-105{{ end }}" + class="not-prose absolute inset-0 h-full w-full object-cover transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] {{ if $featureImageHover }}group-hover:scale-[1.03]{{ end }}" {{ with $featureImagePosition }}style="object-position: {{ . }};"{{ end }} /> {{ end }} diff --git a/layouts/partials/contributors.html b/layouts/partials/contributors.html index 81199028..5625c153 100644 --- a/layouts/partials/contributors.html +++ b/layouts/partials/contributors.html @@ -24,7 +24,7 @@ title="{{ .username }} ({{ .contributions }} contributions)" aria-label="Contributor: {{ .username }}"> {{ .username }} + {{- if $github }} + {{ partial "icon.html" "github" }} + {{ end -}} + {{ $label | markdownify }} + {{- if $stars }} + + {{ partial "icon.html" "star" }} + {{ $stars }} + + {{- else }} + {{ partial "icon.html" "link" }} + {{- end }} + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 649f5bc0..e8f8ce40 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -12,7 +12,7 @@ {{ $navClass := printf "flex flex-row pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400 %s" (cond $onlyIcon "overflow-x-auto py-2" "") }} {{ $ulClass := printf "flex list-none %s" (cond $onlyIcon "flex-row" "flex-col sm:flex-row") }} {{ $liClass := printf "flex mb-1 text-end sm:mb-0 sm:me-7 sm:last:me-0 %s" (cond $onlyIcon "me-4" "") }} -