@quaffui/quaff 1.0.0-alpha1 → 1.0.0-beta1

package/dist/components/private/QDocs.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { setContext, type Snippet } from "svelte";
-  import { assets } from "$app/paths";
   import { QCard, QCardSection, QTheme, Quaff } from "../..";
   import { QColors, QDocsCtxName, type QComponentDocs } from "../../utils";
   import QApi from "./QApi.svelte";
@@ -38,44 +37,54 @@
     setContext(QDocsCtxName.snippets, () => snippets);
   }
 
-  const image = $derived(`${assets}/cocktail-close-up.jpg`);
-
   let principalDocument = Array.isArray(componentDocs)
     ? componentDocs[0]
     : componentDocs;
+
+  const brightness = $derived(Quaff.darkMode.isActive ? 0.7 : 1.2);
 </script>
 
-<div class="q-docs" style="padding: 1rem">
+<div
+  class="q-docs"
+  style="padding: 1rem; --q-hue-rotate: {hueRotate}deg; --q-brightness: {brightness}; max-width: {Quaff
+    .breakpoints.lg}px; margin: auto;"
+>
   <div class="row q-gutter-lg" style="min-height: 400px">
     <QCard
-      class="col-sm-12 col-lg-6 flex flex-center"
+      class="col-sm-12 col-xs-12 col-lg-6"
       fill="primary"
       style="min-height: 400px; align-content: center;"
     >
-      <h1 class="large no-margin">{principalDocument?.name || docName}</h1>
+      <h1
+        class={[
+          "no-margin justify-center",
+          Quaff.breakpoints.isMoreThan("sm", true) ? "large" : "small",
+        ]}
+      >
+        {docName || principalDocument?.name}
+      </h1>
       <QCardSection class="q-docs__description flex flex-center">
         <h3 class="q-docs__description-text">
-          {principalDocument?.description || docDescription}
+          {docDescription || principalDocument?.description}
         </h3>
       </QCardSection>
     </QCard>
     <QCard
-      class="q-docs__preview col-sm-12 col-lg-6 q-mt-none q-pa-none"
+      class="q-docs__preview col-sm-12 col-xs-12 col-lg-6 q-mt-none q-pa-none"
       fill="secondary"
       style="min-height: 400px"
     >
       <QCardSection class="q-pa-none">
         <div
-          class="flex flex-center"
+          class="flex flex-center column"
           style="position: absolute; height: 100%; width: 100%; z-index: 1; overflow: hidden;"
         >
           {@render display?.()}
         </div>
         <img
           class="q-docs__image"
-          src={image}
+          src="/cocktail-close-up.jpg"
           alt="Close-up of the content of a cocktail"
-          style={`filter: hue-rotate(${hueRotate}deg) ${isDark ? "brightness(0.7)" : "brightness(1.2)"}`}
         />
       </QCardSection>
     </QCard>
@@ -119,6 +128,7 @@
     width: 100%;
     height: 25rem;
     object-fit: cover;
+    filter: hue-rotate(var(--q-hue-rotate)) brightness(var(--q-brightness));
   }
   .q-docs :global(.q-docs__preview) {
     display: flex !important;