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(); ?>>
<head>
<title><?php wp_title( '' ); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<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">
<?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">
<a href="<?php bloginfo( 'url' ); ?>" class="site-header__logo block size-20">
<img class="size-full" src="<?php echo esc_url( $headerLogo ); ?>" alt="<?php bloginfo( 'name' ); ?> logo"/>
<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">
<img class="h-full w-auto" src="<?php echo esc_url( $headerLogo ); ?>" alt="<?php bloginfo( 'name' ); ?> logo"/>
</a>
<?php get_template_part( 'views/components/nav-main' ); ?>
styles/base/typography.css
+1 -1
View File
@@ -40,7 +40,7 @@
*/
@theme {
--font-sans: "Raleway", sans-serif;
--font-sans: "Poppins", sans-serif;
--line-height: 1.6;
--text-base: 1rem;
styles/components/site-header.css
+15 -7
View File
@@ -2,21 +2,29 @@
.site-header {
/* Site header styles */
background: linear-gradient(90.15deg, #0773AC -39.25%, #032F46 100%);
.header__nav-main {
max-width: 80.5rem;
}
.nav-aux__container {
background: linear-gradient(90.17deg, #2189C0 -51.3%, #0773AC 55.75%);
.header__nav-aux {
}
a {
/* Link styles */
color: var(--color-primary-600);
color: var(--color-white);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
&:hover {
color: var(--color-primary-800);
}
&:hover { color: var(--color-primary-800); }
}
#globalSearch {
@apply text-14px text-light;
}
#globalSearch { @apply text-14px text-light; }
}
}
styles/navigation/nav-main-default.css
+23 -21
View File
@@ -13,15 +13,24 @@
/* desktop */
@media screen and (min-width: 62.5rem) {
.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 {
>a,
>.menu-vdi__toggle {
/* text*/
@apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
/* text styles */
@apply font-semibold text-20px text-white hover:text-light no-underline leading-snug;
/* 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) {
.menu-vdi {
.menu-vdi__toggle {
@apply flex items-center gap-2;
}
.menu-vdi__toggle { @apply flex items-center gap-2 hover:cursor-pointer; }
.menu-vdi__item--parent {
@apply relative;
}
.menu-vdi__item--parent { @apply relative; }
.menu-vdi__submenu {
@apply bg-white shadow-lg left-4 w-64 flex-col;
top: calc(100% + 1rem);
>li {
@apply w-full;
}
@apply bg-white shadow-lg left-4 w-64 flex-col;
>li { @apply w-full; }
.menu-vdi__item {
/* text */
/* text styles */
@apply font-bold text-18px text-black hover:text-light no-underline leading-snug;
/* spacing & display */
@apply block w-full;
/* interaction */
@apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
a {
@apply block w-full;
}
a { @apply block w-full; }
}
a.menu-vdi__item,
.menu-vdi__item a {
@apply p-4;
}
.menu-vdi__item a { @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 ) ); ?>">
<button aria-expanded="false" class="<?php echo esc_attr( implode( ' ', $toggleClasses ) ); ?>">
<?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" />
</svg>
</button>
views/components/nav-aux.php
+4 -4
View File
@@ -20,9 +20,9 @@ if ( isset( $menus['aux_navigation'] ) ) {
$currentPageURL = home_url( $wp->request ) . '/';
?>
<div class="nav-aux__container hidden lg:block bg-dark w-full h-12 py-2">
<div class="container flex items-center justify-end gap-x-4 gap-y-0 flex-wrap">
<nav class="nav-aux" role="navigation" aria-label="Auxiliary">
<div class="nav-aux__container hidden lg:block w-full py-0">
<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 py-0" role="navigation" aria-label="Auxiliary">
<?php
if ( has_nav_menu( 'aux_navigation' ) ) {
// 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/forms/search' ); ?>
<span class="font-semibold">@cwccollaborative</span>
</div>
</div>
views/partials/social-media.php
+1 -1
View File
@@ -29,7 +29,7 @@ if ( $circle ) {
foreach ( $sites as $name => $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 ); ?>
<span class="sr-only bg-white text-black">Visit our <?php echo esc_html( $name ); ?> page</span>
</a>