Add CSS variables for customization

assets/css/components/search.css

@@ -1,6 +1,6 @@
 .search-wrapper {
   li {
-    @apply hx-mx-2.5 hx-break-words hx-rounded-md contrast-more:hx-border hx-text-gray-800 contrast-more:hx-border-transparent dark:hx-text-gray-300;
+    @apply hx-mx-2.5 hx-break-words hx-rounded-md contrast-more:hx-border hx-text-neutral-800 contrast-more:hx-border-transparent dark:hx-text-neutral-300;
     a {
       @apply hx-block hx-scroll-m-12 hx-px-2.5 hx-py-2;
     }
@@ -15,17 +15,17 @@
   }
 
   .no-result {
-    @apply hx-block hx-select-none hx-p-8 hx-text-center hx-text-sm hx-text-gray-400;
+    @apply hx-block hx-select-none hx-p-8 hx-text-center hx-text-sm hx-text-neutral-400;
   }
 
   .prefix {
     @apply hx-mx-2.5 hx-mb-2 hx-mt-6 hx-select-none hx-border-b hx-border-black/10 hx-px-2.5 hx-pb-1.5 hx-text-xs hx-font-semibold
-    hx-uppercase hx-text-gray-500 first:hx-mt-0 dark:hx-border-white/20 dark:hx-text-gray-300 contrast-more:hx-border-gray-600
-    contrast-more:hx-text-gray-900 contrast-more:dark:hx-border-gray-50 contrast-more:dark:hx-text-gray-50;
+    hx-uppercase hx-text-neutral-500 first:hx-mt-0 dark:hx-border-white/20 dark:hx-text-neutral-300 contrast-more:hx-border-neutral-600
+    contrast-more:hx-text-neutral-900 contrast-more:dark:hx-border-neutral-50 contrast-more:dark:hx-text-neutral-50;
   }
 
   .excerpt {
-    @apply hx-overflow-hidden hx-text-ellipsis hx-mt-1 hx-text-sm hx-leading-[1.35rem] hx-text-gray-600 dark:hx-text-gray-400 contrast-more:dark:hx-text-gray-50;
+    @apply hx-overflow-hidden hx-text-ellipsis hx-mt-1 hx-text-sm hx-leading-[1.35rem] hx-text-neutral-600 dark:hx-text-neutral-400 contrast-more:dark:hx-text-neutral-50;
     display: -webkit-box;
     line-clamp: 1;
     -webkit-line-clamp: 1;

assets/css/components/steps.css

@@ -3,7 +3,7 @@
 
   &:before {
     @apply hx-absolute hx-w-[33px] hx-h-[33px];
-    @apply hx-border-4 hx-border-white hx-bg-gray-100 dark:hx-border-dark dark:hx-bg-neutral-800;
+    @apply hx-border-4 hx-border-white hx-bg-neutral-100 dark:hx-border-dark dark:hx-bg-neutral-800;
     @apply hx-rounded-full hx-text-neutral-400 hx-text-base hx-font-normal hx-text-center -hx-indent-px;
     @apply hx-mt-[3px] ltr:hx-ml-[-41px] rtl:hx-mr-[-44px];
     content: counter(step);

assets/css/highlight.css

@@ -10,7 +10,7 @@
   }
 
   .filename {
-    @apply hx-absolute hx-top-0 hx-z-[1] hx-w-full hx-truncate hx-rounded-t-xl hx-bg-primary-700/5 hx-py-2 hx-px-4 hx-text-xs hx-text-gray-700 dark:hx-bg-primary-300/10 dark:hx-text-gray-200;
+    @apply hx-absolute hx-top-0 hx-z-[1] hx-w-full hx-truncate hx-rounded-t-xl hx-bg-primary-700/5 hx-py-2 hx-px-4 hx-text-xs hx-text-neutral-700 dark:hx-bg-primary-300/10 dark:hx-text-neutral-200;
   }
 
   .filename + pre:not(.lntable pre) {

assets/css/styles.css

@@ -17,7 +17,7 @@ html {
 }
 
 body {
-  @apply hx-w-full hx-bg-white dark:hx-bg-dark dark:hx-text-gray-100;
+  @apply hx-w-full hx-bg-white dark:hx-bg-dark dark:hx-text-neutral-100;
 }
 
 :root {

assets/css/typography.css

@@ -1,57 +1,57 @@
 .content {
-  :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100;
+  :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @apply hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-neutral-900 dark:hx-text-neutral-100;
   }
-  :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-10 hx-border-b hx-pb-1 hx-text-3xl hx-border-neutral-200/70 contrast-more:hx-border-neutral-400 dark:hx-border-primary-100/10 contrast-more:dark:hx-border-neutral-400;
+  :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @apply hx-font-semibold hx-tracking-tight hx-text-neutral-900 dark:hx-text-neutral-100 hx-mt-10 hx-border-b hx-pb-1 hx-text-3xl hx-border-neutral-200/70 contrast-more:hx-border-neutral-400 dark:hx-border-primary-100/10 contrast-more:dark:hx-border-neutral-400;
   }
-  :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-2xl;
+  :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @apply hx-font-semibold hx-tracking-tight hx-text-neutral-900 dark:hx-text-neutral-100 hx-mt-8 hx-text-2xl;
   }
-  :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-xl;
+  :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @apply hx-font-semibold hx-tracking-tight hx-text-neutral-900 dark:hx-text-neutral-100 hx-mt-8 hx-text-xl;
   }
-  :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-lg;
+  :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @apply hx-font-semibold hx-tracking-tight hx-text-neutral-900 dark:hx-text-neutral-100 hx-mt-8 hx-text-lg;
   }
-  :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-font-semibold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100 hx-mt-8 hx-text-base;
+  :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @apply hx-font-semibold hx-tracking-tight hx-text-neutral-900 dark:hx-text-neutral-100 hx-mt-8 hx-text-base;
   }
-  :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     @apply hx-mt-6 hx-leading-7 first:hx-mt-0;
   }
-  :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     @apply hx-text-primary-600 hx-underline hx-decoration-from-font [text-underline-position:from-font];
   }
-  :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
-    @apply hx-mt-6 hx-border-gray-300 hx-italic hx-text-gray-700 dark:hx-border-gray-700 dark:hx-text-gray-400 first:hx-mt-0 ltr:hx-border-l-2 ltr:hx-pl-6 rtl:hx-border-r-2 rtl:hx-pr-6;
+  :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    @apply hx-mt-6 hx-border-neutral-300 hx-italic hx-text-neutral-700 dark:hx-border-neutral-700 dark:hx-text-neutral-400 first:hx-mt-0 ltr:hx-border-l-2 ltr:hx-pl-6 rtl:hx-border-r-2 rtl:hx-pr-6;
   }
-  :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
+  :where(pre):not(:where(.code-block pre, [class~="not-prose"], [class~="not-prose"] *)) {
     @apply hx-bg-primary-700/5 hx-mb-4 hx-overflow-x-auto hx-rounded-xl hx-font-medium hx-subpixel-antialiased dark:hx-bg-primary-300/10 hx-text-[.9em] contrast-more:hx-border contrast-more:hx-border-primary-900/20 contrast-more:hx-contrast-150 contrast-more:dark:hx-border-primary-100/40 hx-py-4;
   }
-  :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
+  :where(code):not(:where(.code-block code, [class~="not-prose"], [class~="not-prose"] *)) {
     @apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
   }
-  :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
+  :where(table):not(:where(.code-block table, [class~="not-prose"], [class~="not-prose"] *)) {
     @apply hx-block hx-overflow-x-auto hx-mt-6 hx-p-0 first:hx-mt-0;
 
     tr {
-      @apply hx-m-0 hx-border-t hx-border-gray-300 hx-p-0 dark:hx-border-gray-600 even:hx-bg-gray-100 even:dark:hx-bg-gray-600/20;
+      @apply hx-m-0 hx-border-t hx-border-neutral-300 hx-p-0 dark:hx-border-neutral-600 even:hx-bg-neutral-100 even:dark:hx-bg-neutral-600/20;
     }
     th {
-      @apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 hx-font-semibold dark:hx-border-gray-600;
+      @apply hx-m-0 hx-border hx-border-neutral-300 hx-px-4 hx-py-2 hx-font-semibold dark:hx-border-neutral-600;
     }
     td {
-      @apply hx-m-0 hx-border hx-border-gray-300 hx-px-4 hx-py-2 dark:hx-border-gray-600;
+      @apply hx-m-0 hx-border hx-border-neutral-300 hx-px-4 hx-py-2 dark:hx-border-neutral-600;
     }
   }
-  :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     @apply hx-mt-6 hx-list-decimal first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
     li {
       @apply hx-my-2;
     }
   }
-  :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     @apply hx-mt-6 hx-list-disc first:hx-mt-0 ltr:hx-ml-6 rtl:hx-mr-6;
     li {
       @apply hx-my-2;
@@ -60,21 +60,21 @@
   /* This CSS rule targets the first nested unordered (ul) or ordered (ol) list
      inside the list item (li) of any parent ul or ol.
      The rule sets the top margin of the selected list to zero. */
-  :where(ul, ol) > li > :where(ul, ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  :where(ul, ol) > li > :where(ul, ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     @apply hx-mt-0;
   }
-  :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     @apply hx-border-black hx-border-opacity-[0.04] hx-bg-opacity-[0.03] hx-bg-black hx-break-words hx-rounded-md hx-border hx-py-0.5 hx-px-[.25em] hx-text-[.9em] dark:hx-border-white/10 dark:hx-bg-white/10;
   }
-  :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
+  :where(pre.mermaid):not(:where(.code-block pre, [class~="not-prose"], [class~="not-prose"] *)) {
     @apply hx-bg-transparent hx-rounded-none dark:hx-bg-transparent;
   }
-  :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     @apply hx-mx-auto hx-my-4 hx-rounded-md;
   }
-  :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
+  :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     figcaption {
-      @apply hx-text-sm hx-text-gray-500 dark:hx-text-gray-400 hx-mt-2 hx-block hx-text-center;
+      @apply hx-text-sm hx-text-neutral-500 dark:hx-text-neutral-400 hx-mt-2 hx-block hx-text-center;
     }
   }
   .footnotes {
@@ -98,9 +98,9 @@
 
   &:after {
     @apply hx-content-['#'] hx-px-1;
-    @apply hx-text-gray-300 dark:hx-text-neutral-700;
+    @apply hx-text-neutral-300 dark:hx-text-neutral-700;
     span:target + & {
-      @apply hx-text-gray-400;
+      @apply hx-text-neutral-400;
       @apply dark:hx-text-neutral-500;
     }
   }

exampleSite/assets/custom.css

@@ -0,0 +1,2 @@
+:root {
+}

exampleSite/content/docs/advanced/customization.md

@@ -24,22 +24,54 @@ The font family of the content can be customized using:
 
 ### Inline Code Element
 
-The color of text mixed with `other text` can customized with:
+The color of text mixed with `other text` can be customized with:
 
 ```css {filename="assets/css/custom.css"}
 .content code:not(.code-block code) {
   color: #c97c2e;
 }
 ```
 
-### Primary Color
+### Custom Colors
 
-The primary color of the theme can be customized by setting the `--primary-hue` and `--primary-saturation` variables:
+You can provide a custom color palettes to override the defaults.
+
+To generate a custom color palette you can use a site like [tints.dev](https://www.tints.dev/).
 
 ```css {filename="assets/css/custom.css"}
 :root {
-  --primary-hue: 100deg;
-  --primary-saturation: 90%;
+  /* Primary/brand color */
+  --colors-primary-50: "#EBF6FF";
+  --colors-primary-100: "#D2EDFE";
+  --colors-primary-200: "#A4DEFE";
+  --colors-primary-300: "#7CD7FD";
+  --colors-primary-400: "#4FD1FD";
+  --colors-primary-500: "#21CFFC";
+  --colors-primary-600: "#03ABE2";
+  --colors-primary-700: "#0278AB";
+  --colors-primary-800: "#02486F";
+  --colors-primary-900: "#012237";
+  --colors-primary-950: "#00111E";
+
+  /* The colors of text */
+  --colors-neutral-50: "#ECF2F8";
+  --colors-neutral-100: "#DCE6EF";
+  --colors-neutral-200: "#B7C9DC";
+  --colors-neutral-300: "#99B0C7";
+  --colors-neutral-400: "#7994AF";
+  --colors-neutral-500: "#617A94";
+  --colors-neutral-600: "#4E5E6E";
+  --colors-neutral-700: "#3B454F";
+  --colors-neutral-800: "#24292D";
+  --colors-neutral-900: "#0D0E0F";
+  --colors-neutral-950: "#070808";
+
+  /* Background colors */
+
+  /* Light mode */
+  --colors-bright: "#eceeee";
+  /* Dark mode */
+  --colors-dark: "#0c0d0e";
 }
 ```
 

exampleSite/content/showcase/index.fa.md

@@ -7,14 +7,14 @@ layout: wide
 
 <div class="hx-mt-4"></div>
 
-<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-text-gray-400">
+<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-neutral-500 dark:hx-text-neutral-400">
 پروژه‌های متن‌باز که توسط هگزترا طراحی شده‌اند.
 </p>
 
 {{< cards >}}
-  {{< card link="https://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://getporter.org/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://github.com/imfing/hextra-starter-template/" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://developers.clever-cloud.com/" title="Clever Cloud Documentation" image="https://cellar-c2.services.clever-cloud.com/documentation/doc-screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://getporter.org/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://github.com/imfing/hextra-starter-template/" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://developers.clever-cloud.com/" title="Clever Cloud Documentation" image="https://cellar-c2.services.clever-cloud.com/documentation/doc-screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
 {{< /cards >}}

exampleSite/content/showcase/index.md

@@ -7,14 +7,14 @@ layout: wide
 
 <div class="hx-mt-4"></div>
 
-<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-text-gray-400">
+<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-neutral-500 dark:hx-text-neutral-400">
 Open source projects powered by Hextra.
 </p>
 
 {{< cards >}}
-  {{< card link="https://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://getporter.org/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://github.com/imfing/hextra-starter-template/" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://developers.clever-cloud.com/" title="Clever Cloud Documentation" image="https://cellar-c2.services.clever-cloud.com/documentation/doc-screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://getporter.org/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://github.com/imfing/hextra-starter-template/" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://developers.clever-cloud.com/" title="Clever Cloud Documentation" image="https://cellar-c2.services.clever-cloud.com/documentation/doc-screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
 {{< /cards >}}

exampleSite/content/showcase/index.zh-cn.md

@@ -7,13 +7,13 @@ layout: wide
 
 <div class="hx-mt-4"></div>
 
-<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-gray-500 dark:hx-text-gray-400">
+<p class="hx-mb-12 hx-text-center hx-text-lg hx-text-neutral-500 dark:hx-text-neutral-400">
 由 Hextra 驱动的开源网站和项目。
 </p>
 
 {{< cards >}}
-  {{< card link="https://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://getporter.org/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
-  {{< card link="https://github.com/imfing/hextra-starter-template" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://developers.osuny.org" title="Osuny" image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://getporter.org/" title="Porter" image="https://repository-images.githubusercontent.com/155893691/aa249c80-fcf3-11ea-93b0-30079e8d7de4" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://lutheranconfessions.org/" title="LutheranConfessions" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
+{{< card link="https://github.com/imfing/hextra-starter-template" title="Hextra Starter Template" image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg" imageStyle="object-fit:cover; aspect-ratio:16/9;" >}}
 {{< /cards >}}