...

smnandre · Nov 3, 2024 · 19d4c42 · 19d4c42
1 parent 7fb349e
commit 19d4c42
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,4 @@
-<div class="PackageHeader mb-5 {{ not (command ?? true) ? 'pb-5' }}"  style="background: {{ package.gradient }}, {{ package.color }}; --color-accent: {{ package.color }};"
+<div class="PackageHeader" style="background: {{ package.gradient }}, {{ package.color }}; --color-accent: {{ package.color }};"
 >
     <div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5 position-relative">
 

diff --git a/ux.symfony.com/templates/components/Package/PackageIcon.html.twig b/ux.symfony.com/templates/components/Package/PackageIcon.html.twig
@@ -1,4 +1,11 @@
-<div class="PackageIcon" style="--gradient: {{ package.gradient }};--color: {{ package.color }};">
-    <img width="36" height="36" src="{{ asset('images/ux_packages/' ~ package.imageFilename) }}"
+{# @var package App\Model\UxPackage #}
+{% props package %}
+
+<div {{ attributes.defaults({
+    class: 'PackageIcon',
+    style: '--gradient: ' ~ package.gradient ~ ';--color: ' ~ package.color ~ ';' 
+}) }}>
+    <img width="36" height="36" 
+         src="{{ asset('images/ux_packages/' ~ package.imageFilename) }}" 
          alt="{{ package.humanName }} UX icon">
 </div>
diff --git 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;*/
-            }
         </style>
 
-        <a class="PackageIcon">
-            <twig:Package:PackageIcon package="{{ package }}" />
-        </a>
-
         <a href="{{ url(package.route) }}" class="PackageNav_title" title="{ package.humanName }}">
-            {{ package.humanName }}
+
+            <twig:Package:PackageIcon package="{{ package }}" class="PackageNav_icon" />
+
+            <span>
+                {{ package.humanName }}
+            </span>
+
         </a>
 
         {% 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
@@ -58,13 +58,38 @@
     {% endblock %}
 
     {% block package_install %}
+
+
         <section class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
+
+            <h2 class="ubuntu">Install it</h2>
+
             {{ include('ux_packages/_package_install.html.twig', {
                 package: package,
             }) }}
         </section>
     {% endblock %}
 
+
+    <section class="section alt" id="installation">
+        <div class="container container-xl">
+            <h2>Installation</h2>
+        </div>
+    </section>
+
+    <section class="section alt" id="documentation">
+        <div class="container container-xl">
+            <h2>Documentation</h2>
+        </div>
+    </section>
+
+    <section class="section alt" id="support">
+        <div class="container container-xl">
+            <h2>Support</h2>
+        </div>
+    </section>
+
+
     {% block package_links %}
         {{ include('ux_packages/_package_links.html.twig', {
             package: package