[6.x] Add missing architectural lines to navigation > getting started screen

packages/ui/src/Button/Button.vue

@@ -26,7 +26,7 @@ const iconOnly = computed(() => (props.icon && !hasDefaultSlot && !props.text) |
 
 const buttonClasses = computed(() => {
     const classes = cva({
-        base: 'inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-gray-400 dark:disabled:text-gray-600 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-black [&_svg]:opacity-60 dark:[&_svg]:text-white',
+        base: 'relative inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-gray-400 dark:disabled:text-gray-600 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-black [&_svg]:opacity-60 dark:[&_svg]:text-white',
         variants: {
             variant: {
                 default: [

packages/ui/src/Header.vue

@@ -11,7 +11,7 @@ const props = defineProps({
     <header class="flex flex-wrap items-center justify-between gap-4 py-8" data-ui-header>
         <h1 class="text-[25px] leading-[1.25] st-text-legibility font-medium antialiased flex items-center gap-2.5 flex-1">
             <!-- Wrap icon in a fixed size div (the same size as the icon) to prevent layout shift once it loads -->
-            <div v-if="icon" class="size-5">
+            <div v-if="icon" class="size-5 relative bg-white dark:bg-gray-900">
                 <Icon :name="icon" class="size-5 text-gray-500"></Icon>
             </div>
             <slot name="title">{{ title }}</slot>

resources/css/core/utilities.css

@@ -233,78 +233,79 @@
 
 */
 @utility bg-architectural-lines {
-    overflow: hidden;
-    &::before {
-        content: '';
-        pointer-events: none;
-        position: absolute;
-        inset: 0;
-        background-image: url('../../svg/architectural-lines.svg');
-        background-size: 100%;
-        /* Reduce the chances of the background circles overlapping the button */
-        @media (width < 1300px) {
-            background-position-y: 130%;
-        }
-        @media (width > 2000px) {
-            /* The lines become thicker because the svg gets stretched, so reduce opacity to compensate for this */
-            opacity: 0.7;
-        }
-    }
-    .dark &::before {
-        filter: invert(100%);
-    }
-    /* Central horizontal line */
-    [data-ui-panel] {
-        > * {
-            position: relative;
-            z-index: 1;
-        }
-
-        &::after {
-            --height: 1px;
-            --line-color: hsl(0deg 0% 95%);
+    &:not(:has(.page-tree-branch)) {
+        &::before {
             content: '';
             pointer-events: none;
             position: absolute;
             inset: 0;
-            height: var(--height);
-            border-image: conic-gradient(var(--line-color) 0 0) fill 0//0 100vw;
-            top: calc(50% - var(--height));
+            background-image: url('../../svg/architectural-lines.svg');
+            background-size: 100%;
+            /* Reduce the chances of the background circles overlapping the button */
+            @media (width < 1300px) {
+                background-position-y: 130%;
+            }
+            @media (width > 2000px) {
+                /* The lines become thicker because the svg gets stretched, so reduce opacity to compensate for this */
+                opacity: 0.7;
+            }
         }
-        .dark &::after {
-            --line-color: hsl(240deg 2.56% 15%);
+        .dark &::before {
+            filter: invert(100%);
         }
-    }
-    footer {
-        position: relative;
-        &::before {
-            content: '';
-            pointer-events: none;
-            position: absolute;
-            border-block-end: 1px solid black;
-            opacity: 0.06;
-            width: 100vw;
-            top: 50%;
-            transform: translateY(50%);
+        /* Central horizontal line */
+        [data-ui-panel] {
+            > * {
+                position: relative;
+                z-index: 1;
+            }
+
+            &::after {
+                --height: 1px;
+                --line-color: hsl(0deg 0% 95%);
+                content: '';
+                pointer-events: none;
+                position: absolute;
+                inset: 0;
+                height: var(--height);
+                border-image: conic-gradient(var(--line-color) 0 0) fill 0//0 100vw;
+                top: calc(50% - var(--height));
+            }
+            .dark &::after {
+                --line-color: hsl(240deg 2.56% 15%);
+            }
         }
-        button:only-child {
+        footer {
             position: relative;
-            &::before, &::after {
+            &::before {
                 content: '';
                 pointer-events: none;
                 position: absolute;
-                inset: 0;
-                border: 1px solid black;
+                border-block-end: 1px solid black;
                 opacity: 0.06;
-                width: 60%;
-                aspect-ratio: 1;
-                left: 50%;
+                width: 100vw;
                 top: 50%;
-                transform: translate(-50%, -50%);
-                border-radius: 50%;
+                transform: translateY(50%);
             }
-            &::before {
-                width: 45%;
+            button:only-child {
+                position: relative;
+                &::before, &::after {
+                    content: '';
+                    pointer-events: none;
+                    position: absolute;
+                    inset: 0;
+                    border: 1px solid black;
+                    opacity: 0.06;
+                    width: 60%;
+                    aspect-ratio: 1;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    border-radius: 50%;
+                }
+                &::before {
+                    width: 45%;
+                }
             }
         }
     }

resources/views/navigation/show.blade.php

@@ -1,6 +1,7 @@
 @inject('str', 'Statamic\Support\Str')
 @extends('statamic::layout')
 @section('title', Statamic::crumb($nav->title(), 'Navigation'))
+@section('content-card-modifiers', $nav->in($site)->pages()->all()->isEmpty() ? 'bg-architectural-lines' : '')
 
 @section('content')
     <navigation-view