Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Build desktop header
Sync TODOs with Issues / sync_todos (push) Successful in 5s
Details

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Keith Solomon
2026-05-02 14:41:25 -05:00
parent 81f5bbf906
commit 4257f96d0b
7 changed files with 68 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
header.php
+3 -4
View File
@@ -32,7 +32,6 @@ $showHero = in_array(
<html <?php language_attributes(); ?>> <html <?php language_attributes(); ?>>
<head> <head>
<title><?php wp_title( '' ); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>"> <meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -47,9 +46,9 @@ $showHero = in_array(
<header role="banner" class="site-header bg-secondary flex flex-col items-center justify-start"> <header role="banner" class="site-header bg-secondary flex flex-col items-center justify-start">
<?php get_template_part( 'views/components/nav-aux' ); ?> <?php get_template_part( 'views/components/nav-aux' ); ?>
<div class="header__nav-main container py-4 items-center grid gap-x-8 gap-y-0 grid-cols-[83px_auto] grid-rows-[1fr] justify-between"> <div class="header__nav-main container py-4 items-center grid gap-x-8 gap-y-0 grid-cols-[437px_auto] grid-rows-[1fr] justify-between">
<a href="<?php bloginfo( 'url' ); ?>" class="site-header__logo block size-20"> <a href="<?php bloginfo( 'url' ); ?>" class="site-header__logo block">
<img class="size-full" src="<?php echo esc_url( $headerLogo ); ?>" alt="<?php bloginfo( 'name' ); ?> logo"/> <img class="h-full w-auto" src="<?php echo esc_url( $headerLogo ); ?>" alt="<?php bloginfo( 'name' ); ?> logo"/>
</a> </a>
<?php get_template_part( 'views/components/nav-main' ); ?> <?php get_template_part( 'views/components/nav-main' ); ?>
styles/base/typography.css
+1 -1
View File
@@ -40,7 +40,7 @@
*/ */
@theme { @theme {
--font-sans: "Raleway", sans-serif; --font-sans: "Poppins", sans-serif;
--line-height: 1.6; --line-height: 1.6;
--text-base: 1rem; --text-base: 1rem;
styles/components/site-header.css
+15 -7
View File
@@ -2,21 +2,29 @@
.site-header { .site-header {
/* Site header styles */ /* Site header styles */
background: linear-gradient(90.15deg, #0773AC -39.25%, #032F46 100%);
.header__nav-main {
max-width: 80.5rem;
}
.nav-aux__container { .nav-aux__container {
background: linear-gradient(90.17deg, #2189C0 -51.3%, #0773AC 55.75%);
.header__nav-aux {
}
a { a {
/* Link styles */ /* Link styles */
color: var(--color-primary-600); color: var(--color-white);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
transition: color 0.3s ease; transition: color 0.3s ease;
&:hover { &:hover { color: var(--color-primary-800); }
color: var(--color-primary-800);
}
} }
#globalSearch { #globalSearch { @apply text-14px text-light; }
@apply text-14px text-light;
}
} }
} }
styles/navigation/nav-main-default.css
+23 -21
View File
@@ -13,15 +13,24 @@
/* desktop */ /* desktop */
@media screen and (min-width: 62.5rem) { @media screen and (min-width: 62.5rem) {
.nav-main .menu-vdi { .nav-main .menu-vdi {
@apply flex items-center justify-end p-0 m-0; @apply flex items-end justify-end p-0 m-0;
>li { >li {
>a, >a,
>.menu-vdi__toggle { >.menu-vdi__toggle {
/* text*/ /* text styles */
@apply font-bold text-20px text-black hover:text-light no-underline leading-snug; @apply font-semibold text-20px text-white hover:text-light no-underline leading-snug;
/* spacing & display */ /* spacing & display */
@apply mx-4 p-0 no-underline; @apply mx-2 p-0 no-underline;
}
&.menu-vdi__item--contact {
>a {
background: linear-gradient(93.03deg, #F26B53 0%, #D24D32 100%);
border-radius: 20px 4px;
padding: .5rem 2rem;
}
} }
} }
} }
@@ -29,39 +38,32 @@
@media screen and (min-width: 62.5rem) { @media screen and (min-width: 62.5rem) {
.menu-vdi { .menu-vdi {
.menu-vdi__toggle { .menu-vdi__toggle { @apply flex items-center gap-2 hover:cursor-pointer; }
@apply flex items-center gap-2;
}
.menu-vdi__item--parent { .menu-vdi__item--parent { @apply relative; }
@apply relative;
}
.menu-vdi__submenu { .menu-vdi__submenu {
@apply bg-white shadow-lg left-4 w-64 flex-col;
top: calc(100% + 1rem); top: calc(100% + 1rem);
>li { @apply bg-white shadow-lg left-4 w-64 flex-col;
@apply w-full;
} >li { @apply w-full; }
.menu-vdi__item { .menu-vdi__item {
/* text */ /* text styles */
@apply font-bold text-18px text-black hover:text-light no-underline leading-snug; @apply font-bold text-18px text-black hover:text-light no-underline leading-snug;
/* spacing & display */ /* spacing & display */
@apply block w-full; @apply block w-full;
/* interaction */ /* interaction */
@apply focus-visible:bg-secondary-200 hover:bg-secondary-200; @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
a { a { @apply block w-full; }
@apply block w-full;
}
} }
a.menu-vdi__item, a.menu-vdi__item,
.menu-vdi__item a { .menu-vdi__item a { @apply p-4; }
@apply p-4;
}
} }
} }
} }
views/components/menu-items/has-children.php
+1 -1
View File
@@ -32,7 +32,7 @@ if ( ! empty( $item->classes ) ) {
<li id="menuVdiItem<?php echo esc_attr( $item->ID ); ?>" class="<?php echo esc_attr( implode( ' ', $itemClasses ) ); ?>"> <li id="menuVdiItem<?php echo esc_attr( $item->ID ); ?>" class="<?php echo esc_attr( implode( ' ', $itemClasses ) ); ?>">
<button aria-expanded="false" class="<?php echo esc_attr( implode( ' ', $toggleClasses ) ); ?>"> <button aria-expanded="false" class="<?php echo esc_attr( implode( ' ', $toggleClasses ) ); ?>">
<?php echo esc_html( $item->title ); ?> <?php echo esc_html( $item->title ); ?>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#F26B53" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg> </svg>
</button> </button>
views/components/nav-aux.php
+4 -4
View File
@@ -20,9 +20,9 @@ if ( isset( $menus['aux_navigation'] ) ) {
$currentPageURL = home_url( $wp->request ) . '/'; $currentPageURL = home_url( $wp->request ) . '/';
?> ?>
<div class="nav-aux__container hidden lg:block bg-dark w-full h-12 py-2"> <div class="nav-aux__container hidden lg:block w-full py-0">
<div class="container flex items-center justify-end gap-x-4 gap-y-0 flex-wrap"> <div class="nav-aux container flex items-center justify-end gap-x-4 gap-y-0 flex-wrap text-white py-0">
<nav class="nav-aux" role="navigation" aria-label="Auxiliary"> <nav class="nav-aux py-0" role="navigation" aria-label="Auxiliary">
<?php <?php
if ( has_nav_menu( 'aux_navigation' ) ) { if ( has_nav_menu( 'aux_navigation' ) ) {
// Initialize and render menu items // Initialize and render menu items
@@ -34,6 +34,6 @@ $currentPageURL = home_url( $wp->request ) . '/';
<?php get_template_part( 'views/partials/social-media' ); ?> <?php get_template_part( 'views/partials/social-media' ); ?>
<?php get_template_part( 'views/forms/search' ); ?> <span class="font-semibold">@cwccollaborative</span>
</div> </div>
</div> </div>
views/partials/social-media.php
+1 -1
View File
@@ -29,7 +29,7 @@ if ( $circle ) {
foreach ( $sites as $name => $url ) { foreach ( $sites as $name => $url ) {
if ( $url ) { if ( $url ) {
?> ?>
<a href="<?php echo esc_url( $url ); ?>" class="<?php echo esc_attr( $classes ); ?>"> <a href="<?php echo esc_url( $url ); ?>" class="<?php echo esc_attr( $classes ); ?> p-0 leading-none pb-1">
<?php get_template_part( 'views/icons/' . $name ); ?> <?php get_template_part( 'views/icons/' . $name ); ?>
<span class="sr-only bg-white text-black">Visit our <?php echo esc_html( $name ); ?> page</span> <span class="sr-only bg-white text-black">Visit our <?php echo esc_html( $name ); ?> page</span>
</a> </a>