From 19d4c429377962cc35ccd516afa3702536c4b218 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Andr=C3=A9?= Date: Sun, 3 Nov 2024 05:56:44 +0100 Subject: [PATCH] ... --- ux.symfony.com/assets/styles/app.scss | 1 + ux.symfony.com/assets/styles/app/_html.scss | 6 ++ .../styles/components/_PackageHeader.scss | 13 ++- .../assets/styles/components/_PackageNav.scss | 87 +++++++++++++++++++ .../Package/PackageHeader.html.twig | 2 +- .../components/Package/PackageIcon.html.twig | 11 ++- .../components/Package/PackageNav.html.twig | 56 ++---------- .../templates/ux_packages/package.html.twig | 25 ++++++ 8 files changed, 146 insertions(+), 55 deletions(-) create mode 100644 ux.symfony.com/assets/styles/components/_PackageNav.scss diff --git a/ux.symfony.com/assets/styles/app.scss b/ux.symfony.com/assets/styles/app.scss index 27873192b1b..029441481ec 100644 --- a/ux.symfony.com/assets/styles/app.scss +++ b/ux.symfony.com/assets/styles/app.scss @@ -142,6 +142,7 @@ $utilities: map-remove( @import "components/Pagination"; @import "components/ProductGrid"; @import "components/PackageHeader"; +@import "components/PackageNav"; @import "components/PackageBox"; @import "components/PackageList"; @import "components/Cookbook"; diff --git a/ux.symfony.com/assets/styles/app/_html.scss b/ux.symfony.com/assets/styles/app/_html.scss index 1904d09413d..095b227844c 100644 --- a/ux.symfony.com/assets/styles/app/_html.scss +++ b/ux.symfony.com/assets/styles/app/_html.scss @@ -6,6 +6,10 @@ body { // Dark Mode transition: background-color 150ms linear; + scroll-behavior: smooth; +} +html { + scroll-behavior: smooth; } a, a.page-link, a.page-link:hover { @@ -26,6 +30,8 @@ a, a.page-link, a.page-link:hover { min-height: 100vh; min-width: 320px; overflow-x: clip; + + scroll-behavior: smooth; } main { diff --git a/ux.symfony.com/assets/styles/components/_PackageHeader.scss b/ux.symfony.com/assets/styles/components/_PackageHeader.scss index e706df9013d..e7fdada645a 100644 --- a/ux.symfony.com/assets/styles/components/_PackageHeader.scss +++ b/ux.symfony.com/assets/styles/components/_PackageHeader.scss @@ -2,18 +2,25 @@ h1 { text-shadow: 0 .25rem .25rem rgba(0, 0, 0, .05); text-wrap: balance; + max-width: 54rem; + margin-inline: auto; + font-size: 4.04rem; + line-height: 1.2; em { display: inline-flex; transform: skewX(-16deg) scaleY(0.95) rotate(-.5deg); - font-weight: 400; + font-weight: 300; text-shadow: 0 .25rem .25rem rgba(0, 0, 0, .1); mix-blend-mode: luminosity; font-style: normal; + font-family: var(--font-family-code); + letter-spacing: -8px; } } - .AppHeader + * & { - padding-top: 3rem; + .AppHeader + * & { + padding-top: 5rem; + padding-bottom: 7rem; } } diff --git a/ux.symfony.com/assets/styles/components/_PackageNav.scss b/ux.symfony.com/assets/styles/components/_PackageNav.scss new file mode 100644 index 00000000000..78a4e6d9010 --- /dev/null +++ b/ux.symfony.com/assets/styles/components/_PackageNav.scss @@ -0,0 +1,87 @@ +.PackageNav { + --package-color: var(--color); + --package-color-text: color-mix(in oklch, #a9e41b, #000d); + + margin-block-start: -6rem; + background: transparent; + + &--sticky { + position: sticky; + background: rgb(0 0 0 / 0.2); + top: 0; + z-index: 444; + backdrop-filter: blur(1rem); + transition: all 0.25s; + + &::before { + content: ''; + position: absolute; + inset: 0 0 auto 0; + background: var(--gradient); + z-index: -1; + height: 2px; + } + } +} + +.PackageNav_link { + + --color: var(--package-color, #fff); + + transition: all 0.5s; + + &.active { + transition: all 0.2s; + color: var(--package-color-text); + } +} + +.PackageNav > div { + display: flex; + align-items: center; + gap: 1rem; + padding-block: .75rem; +} + +.PackageNav_menu { + display: flex; + gap: 1rem; + margin-inline-start: auto; + align-items: center; +} + +.PackageNav_title { + font-size: 1.35rem; + font-weight: 300; + color: #fff; + display: flex; + align-items: center; + font-family: var(--font-family-title); + text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); + scale: 1.25; + gap: 4rem; + + strong { + font-weight: 500; + } + + .PackageNav_icon { + --logo-size: 4rem; + box-shadow: -1px -1px 21px -5px color-mix(in oklch, var(--package-color), #0004); + scale: 1.5; + transform-origin: center left; + margin-left: 1.5rem; + img { + filter: opacity(0.8) drop-shadow(2px 0 4px #00000020); + } + } +} + +.PackageNav_link { + padding: .5rem 1.5rem; + border-radius: 2rem; + color: #fffc; + background: rgb(0 0 0 / .1); + font-stretch: semi-condensed; + font-weight: 300; +} diff --git a/ux.symfony.com/templates/components/Package/PackageHeader.html.twig b/ux.symfony.com/templates/components/Package/PackageHeader.html.twig index e05459c385a..0bffc7a3a90 100644 --- a/ux.symfony.com/templates/components/Package/PackageHeader.html.twig +++ b/ux.symfony.com/templates/components/Package/PackageHeader.html.twig @@ -1,4 +1,4 @@ -
diff --git a/ux.symfony.com/templates/components/Package/PackageIcon.html.twig b/ux.symfony.com/templates/components/Package/PackageIcon.html.twig index a6b478f5778..659a8470b5b 100644 --- a/ux.symfony.com/templates/components/Package/PackageIcon.html.twig +++ b/ux.symfony.com/templates/components/Package/PackageIcon.html.twig @@ -1,4 +1,11 @@ -
- + {{ package.humanName }} UX icon
diff --git a/ux.symfony.com/templates/components/Package/PackageNav.html.twig b/ux.symfony.com/templates/components/Package/PackageNav.html.twig index 7ea8077cd88..20323d8c334 100644 --- a/ux.symfony.com/templates/components/Package/PackageNav.html.twig +++ b/ux.symfony.com/templates/components/Package/PackageNav.html.twig @@ -15,58 +15,16 @@ justify-content: center; flex-shrink: 0; } - .PackageNav { - position: sticky; - background-color: var(--bs-body-bg); - background: rgba(0, 0, 0, 0.2); - top: 0; - z-index: 444; - backdrop-filter: blur(1rem); - } - .PackageNav > div { - display: flex; - align-items: center; - gap: 1rem; - padding-block: .75rem; - } - .PackageNav_menu { - display: flex; - gap: 1rem; - margin-inline-start: auto; - align-items: center; - } - .PackageNav_icon { - position: absolute; - left: 0; - } - .PackageNav_link { - padding: .5rem .75rem; - border-radius: 2rem; - color: #fff; - text-shadow: 0 0 1px 1px #0008; - background: rgb(0 0 0 / .1); - } - .PackageIcon { - margin-inline-end: auto; - --logo-size: 3rem; - /*background: var(--gradient);*/ - /*background-color: var(--color);*/ - /*width: var(--logo-size);*/ - /*height: var(--logo-size);*/ - /*border-radius: 14%;*/ - /*display: flex;*/ - /*align-items: center;*/ - /*justify-content: center;*/ - /*flex-shrink: 0;*/ - } - - - - - {{ package.humanName }} + + + + + {{ package.humanName }} + + {% set package_links = { diff --git a/ux.symfony.com/templates/ux_packages/package.html.twig b/ux.symfony.com/templates/ux_packages/package.html.twig index 709debc3be6..d0887e244cd 100644 --- a/ux.symfony.com/templates/ux_packages/package.html.twig +++ b/ux.symfony.com/templates/ux_packages/package.html.twig @@ -58,13 +58,38 @@ {% endblock %} {% block package_install %} + +
+ +

Install it

+ {{ include('ux_packages/_package_install.html.twig', { package: package, }) }}
{% endblock %} + +
+
+

Installation

+
+
+ +
+
+

Documentation

+
+
+ +
+
+

Support

+
+
+ + {% block package_links %} {{ include('ux_packages/_package_links.html.twig', { package: package