Skip to content

Charlie/footbar styles #319

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gcharlie wants to merge 32 commits into
base: v6
Choose a base branch
from
Open

Charlie/footbar styles #319

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
ff106f6
breadcrumb styles to accomidate refactor
gcharlie Feb 14, 2026
ac91624
rewrite footbar styles to be grid based
gcharlie Mar 3, 2026
a83b634
reduce opinionated styles on nav widget
gcharlie Mar 3, 2026
d0e75c2
change breakpoints used in footbar
gcharlie Mar 3, 2026
bf59efd
adjust sidebar to accomidate footbar styling
gcharlie Mar 3, 2026
1b5c989
make foor padding more uniform
gcharlie Mar 3, 2026
b70bb7a
remove breakpoint dependance from footer
gcharlie Mar 4, 2026
8ea699c
fix non clickable breadcrumb menu toggle
gcharlie Mar 5, 2026
42c3647
Merge branch 'charlie/breadcrumbs-additional-changes' into charlie/fo…
gcharlie Mar 5, 2026
111c443
remove edudant styles
gcharlie Mar 9, 2026
7ad110c
Merge branch 'charlie/breadcrumbs-additional-changes' of https://gith…
gcharlie Mar 9, 2026
e056cc4
remove redudant styling
gcharlie Mar 10, 2026
8438d06
fix navcrumb home button styles
gcharlie Mar 10, 2026
6ae5af7
Merge branch 'charlie/breadcrumbs-additional-changes' of https://gith…
gcharlie Mar 10, 2026
5b7d7ba
use poover on navcrumb menu
gcharlie Mar 10, 2026
950a9ac
adjust crumb list naming, and style for popoverapi
gcharlie Mar 11, 2026
2500ac0
initial styles breakout
gcharlie Mar 11, 2026
89b41a3
navcrumb css var listing
gcharlie Mar 11, 2026
ef3fb51
class renaming
gcharlie Mar 11, 2026
79cc042
navcrumb styles regorg
gcharlie Mar 11, 2026
af52926
nav crumb styles optimization
gcharlie Mar 11, 2026
1771f65
reset proof navcrumbs
gcharlie Mar 12, 2026
bfab22a
optimize opening instances for navcrumb menu
gcharlie Mar 12, 2026
ec55098
comment and cleanup
gcharlie Mar 12, 2026
cac6cee
optomize navcrumbs
gcharlie Mar 12, 2026
d6e6dac
simplify navcrumb style presentation
gcharlie Mar 12, 2026
a3d4dc1
navcrumb comments
gcharlie Mar 12, 2026
89c36f0
use font awesome icon for expander
gcharlie Mar 12, 2026
7fa634f
fix expanded non-menued breadcrumbs
gcharlie Mar 12, 2026
a0e5316
Merge branch 'charlie/breadcrumbs-additional-changes' of https://gith…
gcharlie Mar 12, 2026
ff64d7a
remove redudnt style
gcharlie Mar 12, 2026
232f7f0
Merge branch 'charlie/breadcrumbs-additional-changes' of https://gith…
gcharlie Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 29 additions & 5 deletions burf-customizations/layout/_breadcrumbs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,10 @@
vertical-align: middle;
}

button {
.nav-crumb-button {
background: var( --nav-crumbs-color-buttons-background, var( --bu-base-button-bg-color, #eee ) );
border: 0;
border-radius: var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) );
cursor: pointer;
font-family: var( --nav-crumb-font-family );
font-size: var( --nav-crumb-font-size, 1rem );
line-height: var( --nav-crumb-height, 1em );
Expand Down Expand Up @@ -75,7 +74,7 @@


// Styles for when breadcrumb dropdown menu is open
&[ data-menu-open="true" ] {
&:has( .nav-crumb-menu[open] ) {

.nav-crumb-menu-wrapper {
min-width: clamp( 0px, var( --nav-crumb-char-count-current, 27ch ), 90vw );
Expand Down Expand Up @@ -197,11 +196,11 @@
white-space: nowrap;
width: 100%;

&:is( span ) {
&:not( :has( button ) ) {
padding: var( --nav-crumb-padding, 0.75em ) 0;
}

&:is( button ) {
&:has( button ) {
padding-right: calc( var( --nav-crumb-padding, 0.75em ) * 2 + 1em);

&::after {
Expand All @@ -228,6 +227,23 @@

}

.nav-crumb-menu-open,
.nav-crumb-menu-close {
display: none;
bottom: 0;
font-size: 0;
left: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
opacity: 0;
}

.nav-crumb-menu-open {
display: block;
}

.nav-crumb-menu-wrapper {
display: inline-block;
min-width: 0;
Expand All @@ -244,6 +260,14 @@
content: "\f106";
}
}

.nav-crumb-menu-open {
display: none;
}

.nav-crumb-menu-close {
display: block;
}

.nav-crumb-menu {
border-radius: 0 0 var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) ) var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) );
Expand Down
27 changes: 13 additions & 14 deletions burf-theme/layout/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,11 +143,11 @@ $number-widgets-footbar: 3 !default;
//
// Since: 1.0.0

.footbar {
:where( .footbar ) {
@extend %clearfix;
background: var(--footbar-background, #{$color-footbar-bg});
border-top: var(--footbar-border, var(--bu-border, #{$border-footbar}));
padding-bottom: var(--footbar-padding-bottom, #{$footbar-padding-bottom});
padding-block: var( --bu-spacing );
width: 100%;

a {
Expand Down Expand Up @@ -175,14 +175,13 @@ $_footbar-widget-width: math.div( $grid-number-columns, $number-widgets-footbar
//
// Since: 1.0.0

.footbar-container {
@extend %container-styles;
background: var(--footbar-container-background, #{$color-footbar-container-bg});

.widget {
@extend %col-md-margin-#{$_footbar-widget-width};
padding: 0;
}
:where( .footbar-container ) {
background: var( --footbar-container-background, #{ $color-footbar-container-bg } );
display: grid;
gap: var( --bu-spacing );
grid-template-columns: repeat( auto-fit, minmax( min( var( --footer-widget-width, 320px ), 100% ), 1fr) );
margin-inline: auto;
max-width: var( --bu-container-max-inline-size--guttered );
}

// Footer
Expand All @@ -197,11 +196,11 @@ $_footbar-widget-width: math.div( $grid-number-columns, $number-widgets-footbar
//
// Since: 1.0.0

$color-body-bg: $color-grayscale-0 !default;
// $color-body-bg: $color-grayscale-0 !default;

body {
background-color: var(--body-background, #{$color-body-bg});
}
// body {
// background-color: var(--body-background, #{$color-body-bg});
// }

// Controls styling for the site footer - branding, address, and social links.
//
Expand Down
3 changes: 3 additions & 0 deletions burf-theme/layout/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@

.sidebar {
background-color: var( --sidebar-background-color, #fafafa );
display: flex;
flex-direction: column;
gap: var( --bu-spacing );
grid-area: sidebar;
padding-block: var( --bu-container-padding-vertical );
padding-inline: var( --bu-container-padding-horizontal );
Expand Down
46 changes: 27 additions & 19 deletions burf-theme/widgets/_widget-navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,26 +115,29 @@ $color-widget-contentnav-active: $color-link-active !default;
//
// Since: 1.0.0

.widget_bu_pages,
.widget_nav_menu {
:where(
.widget_bu_pages,
.widget_nav_menu
) {
h3 {
margin-bottom: 0;
}

ul {
border-bottom: var(--widget-border, var(--bu-border, #{$border-widget-contentnav}));
border-bottom: var( --widget-border, var( --bu-border, #{ $border-widget-contentnav } ) );
margin: 0;
padding: 0;

ul {
border: 0;
border-left: var( --widget-border, var( --bu-border, #{ $border-widget-contentnav } ) );
margin: 0;
}

}

li {
border-top: var(--widget-border, var(--bu-border, #{$border-widget-contentnav}));
font-family: var(--widget-font, #{$font-family-widget-contentnav});
border-top: var( --widget-border, var( --bu-border, #{ $border-widget-contentnav } ) );

&:first-child {
border: 0;
Expand All @@ -145,26 +148,31 @@ $color-widget-contentnav-active: $color-link-active !default;
padding: 0 0 0 $padding-small;

a {
font-size: var(--widget-link-nested-size, #{$font-size-widget-contentnav-nested-link});
font-size: var( --widget-link-nested-size, #{ $font-size-widget-contentnav-nested-link } );
}
}
}

a {
color: var(--widget-link-color, #{$color-widget-contentnav});
display: block;
font-size: var(--widget-link-size, #{$font-size-widget-contentnav-link});
padding: $padding-small 0;
a {
display: block;
font-size: var( --widget-link-size, #{ $font-size-widget-contentnav-link } );
margin: $padding-small 0;

&:hover,
&:focus {
color: var(--widget-link-color--hover, #{$color-widget-contentnav-hover});
text-decoration: none;
&:hover,
&:focus {
color: var( --widget-link-color--hover, #{ $color-widget-contentnav-hover } );
text-decoration: none;
}
}
}

.active,
.current_page_item a {
color: var(--widget-link-color--active, #{$color-widget-contentnav-active});
.active {
color: var( --widget-link-color--active, #{ $color-widget-contentnav-active } );
}
}

.widget_bu_pages,
.widget_nav_menu {
.active {
color: var( --widget-link-color--active, #{ $color-widget-contentnav-active } );
}
}
30 changes: 17 additions & 13 deletions burf-theme/widgets/_widgets.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,6 @@ $border-widget-list: $border !default;
.widget {
@extend %col-full;
@extend %font-size-secondary;
margin-bottom: var(--widget-margin-bottom, #{$widget-margin-bottom});

&:last-child {
margin-bottom: 0;
Expand Down Expand Up @@ -258,25 +257,30 @@ $border-widget-list: $border !default;
//
// Since: 1.0.0

.widget-title {
border: var(--widget-title-border, var(--bu-border, #{$border-widget-title}));
border-width: var(--widget-title-border-width, #{$border-width-widget-title});
color: var(--widget-title-color, var(--bu-heading-color, #{$color-widget-title}));
font-family: var(--widget-title-font, var(--bu-heading-font, #{$font-family-widget-title}));
padding: 0 0 4px;
.widget-title {
border: var( --widget-title-border, var( --bu-border, #{ $border-widget-title } )) ;
border-width: var( --widget-title-border-width, #{ $border-width-widget-title});
color: var( --widget-title-color, var( --bu-heading-color, #{ $color-widget-title } ) );
font-family: var( --widget-title-font, var( --bu-heading-font, #{ $font-family-widget-title } ) );
padding-block-end: 0.5em;
margin-block: 1em;

a {
@include icon($widget-title-link-icon, $widget-title-link-icon-placement);
color: inherit;
text-decoration: none;

&::after {
color: var(--widget-title-icon-color, #{$color-widget-title-link-icon});
}
&:last-child {
@include icon($widget-title-link-icon, $widget-title-link-icon-placement);

&::after {
color: var(--widget-title-icon-color, #{$color-widget-title-link-icon});
}

&:hover::after {
color: var(--widget-title-icon-color--hover, #{$color-widget-title-link-icon-hover});
&:hover::after {
color: var(--widget-title-icon-color--hover, #{$color-widget-title-link-icon-hover});
}
}

}
}

Expand Down