update

css/scss/base.scss

@@ -19,15 +19,42 @@
 // override typography
 
 @import './bootstrap/typography';
-@import '../node_modules/bootstrap/scss/type';
 @import './bootstrap/accordion';
-@import '../node_modules/bootstrap/scss/transitions';
+@import './bootstrap/nav';
-@import '../node_modules/bootstrap/scss/badge';
+@import './bootstrap/navbar';
-@import '../node_modules/bootstrap/scss/card';
+@import './bootstrap/g-components/sidebar';
-@import '../node_modules/bootstrap/scss/grid';
+
+@import '../node_modules/bootstrap/scss/root';
+@import '../node_modules/bootstrap/scss/reboot';
+@import '../node_modules/bootstrap/scss/type';
+@import '../node_modules/bootstrap/scss/images';
 @import '../node_modules/bootstrap/scss/containers';
-@import '../node_modules/bootstrap/scss/helpers';
+@import '../node_modules/bootstrap/scss/grid';
+@import '../node_modules/bootstrap/scss/tables';
+@import '../node_modules/bootstrap/scss/forms';
 @import '../node_modules/bootstrap/scss/buttons';
+@import '../node_modules/bootstrap/scss/transitions';
+@import '../node_modules/bootstrap/scss/dropdown';
+@import '../node_modules/bootstrap/scss/button-group';
+
+@import '../node_modules/bootstrap/scss/card';
+@import '../node_modules/bootstrap/scss/accordion';
+@import '../node_modules/bootstrap/scss/breadcrumb';
+@import '../node_modules/bootstrap/scss/pagination';
+@import '../node_modules/bootstrap/scss/badge';
+@import '../node_modules/bootstrap/scss/alert';
+@import '../node_modules/bootstrap/scss/progress';
+@import '../node_modules/bootstrap/scss/list-group';
+@import '../node_modules/bootstrap/scss/close';
+@import '../node_modules/bootstrap/scss/toasts';
+@import '../node_modules/bootstrap/scss/modal';
+@import '../node_modules/bootstrap/scss/tooltip';
+@import '../node_modules/bootstrap/scss/popover';
+@import '../node_modules/bootstrap/scss/carousel';
+@import '../node_modules/bootstrap/scss/spinners';
+@import '../node_modules/bootstrap/scss/offcanvas';
+@import '../node_modules/bootstrap/scss/placeholders';
+
 @import './bootstrap/utilities';
 
 @function contrast-ratio($color1, $color2) {
@@ -69,22 +96,44 @@
 		background-color: $hex;
 		color: get-contrasting-text-color($hex);
 	}
-	.bg-gradient-#{$color} {
+	.bg-gradient-x-#{$color} {
-		--#{$prefix}gradient-start:0%;
+		--#{$prefix}gradient-start: 0%;
-		--#{$prefix}gradient-end:100%;
+		--#{$prefix}gradient-end: 100%;
 		--#{$prefix}gradient-to: transparent;
-	
+
-		@include gradient-x($start-color: $hex, $end-color: var(--#{$prefix}gradient-to), $start-percent: var(--#{$prefix}gradient-start), $end-percent: var(--#{$prefix}gradient-end));
+		@include gradient-x(
+			$start-color: $hex,
+			$end-color: var(--#{$prefix}gradient-to),
+			$start-percent: var(--#{$prefix}gradient-start),
+			$end-percent: var(--#{$prefix}gradient-end)
+		);
+	}
+	.bg-gradient-y-#{$color} {
+		--#{$prefix}gradient-start: 0%;
+		--#{$prefix}gradient-end: 100%;
+		--#{$prefix}gradient-to: transparent;
+
+		@include gradient-y(
+			$start-color: $hex,
+			$end-color: var(--#{$prefix}gradient-to),
+			$start-percent: var(--#{$prefix}gradient-start),
+			$end-percent: var(--#{$prefix}gradient-end)
+		);
 	}
 }
 
 @each $color, $hex in $theme-colors {
 	.bg-gradient-#{$color} {
-		--#{$prefix}gradient-start:0%;
+		--#{$prefix}gradient-start: 0%;
-		--#{$prefix}gradient-end:100%;
+		--#{$prefix}gradient-end: 100%;
 		--#{$prefix}gradient-to: transparent;
-		
+
-		@include gradient-x($start-color: $hex, $end-color: var(--#{$prefix}gradient-to), $start-percent: var(--#{$prefix}gradient-start), $end-percent: var(--#{$prefix}gradient-end));
+		@include gradient-x(
+			$start-color: $hex,
+			$end-color: var(--#{$prefix}gradient-to),
+			$start-percent: var(--#{$prefix}gradient-start),
+			$end-percent: var(--#{$prefix}gradient-end)
+		);
 	}
 }
 
@@ -101,11 +150,19 @@
 	scroll-behavior: smooth;
 }
 
+i {
+	font-size: 1.5rem;
+}
+
 html,
 body {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	height: 100%;
-	overflow: hidden;
+	gap: 0;
 }
+
+a {
+	text-decoration-thickness: 2px;
+}

css/scss/bootstrap/_nav.scss

@@ -0,0 +1,226 @@
+// Base class
+//
+// Kickstart any navigation component with a set of style resets. Works with
+// `<nav>`s, `<ul>`s or `<ol>`s.
+
+:root {
+	--#{$prefix}nav-item-font-size: #{$nav-item-font-size};
+}
+.nav {
+	// scss-docs-start nav-css-vars
+	--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
+	--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+	@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+	--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+	--#{$prefix}nav-link-color: #{$nav-link-color};
+	--#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
+	--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
+	// scss-docs-end nav-css-vars
+
+	display: flex;
+	flex-wrap: wrap;
+	padding-left: 0;
+	margin-bottom: 0;
+	list-style: none;
+}
+
+.nav-link {
+	display: block;
+	padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
+	@include font-size(var(--#{$prefix}nav-link-font-size));
+	font-weight: var(--#{$prefix}nav-link-font-weight);
+	color: var(--#{$prefix}nav-link-color);
+	text-decoration: if($link-decoration == none, null, none);
+	background: none;
+	border: 0;
+	@include transition($nav-link-transition);
+
+	&:hover,
+	&:focus {
+		color: var(--#{$prefix}nav-link-hover-color);
+		text-decoration: if($link-hover-decoration == underline, none, null);
+	}
+
+	&:focus-visible {
+		outline: 0;
+		box-shadow: $nav-link-focus-box-shadow;
+	}
+
+	// Disabled state lightens text
+	&.disabled,
+	&:disabled {
+		color: var(--#{$prefix}nav-link-disabled-color);
+		pointer-events: none;
+		cursor: default;
+	}
+}
+
+//
+// Tabs
+//
+
+.nav-tabs {
+	// scss-docs-start nav-tabs-css-vars
+	--#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
+	--#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
+	--#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
+	--#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
+	--#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
+	--#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
+	--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+	// scss-docs-end nav-tabs-css-vars
+
+	border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+
+	.nav-link {
+		margin-bottom: calc(
+			-1 * var(--#{$prefix}nav-tabs-border-width)
+		); // stylelint-disable-line function-disallowed-list
+		border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
+		@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
+
+		&:hover,
+		&:focus {
+			// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+			isolation: isolate;
+			border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
+		}
+	}
+
+	.nav-link.active,
+	.nav-item.show .nav-link {
+		color: var(--#{$prefix}nav-tabs-link-active-color);
+		background-color: var(--#{$prefix}nav-tabs-link-active-bg);
+		border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
+	}
+
+	.dropdown-menu {
+		// Make dropdown border overlap tab border
+		margin-top: calc(
+			-1 * var(--#{$prefix}nav-tabs-border-width)
+		); // stylelint-disable-line function-disallowed-list
+		// Remove the top rounded corners here since there is a hard edge above the menu
+		@include border-top-radius(0);
+	}
+}
+
+//
+// Pills
+//
+
+.nav-pills {
+	// scss-docs-start nav-pills-css-vars
+	--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
+	--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
+	--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
+	// scss-docs-end nav-pills-css-vars
+
+	.nav-link {
+		@include border-radius(var(--#{$prefix}nav-pills-border-radius));
+	}
+
+	.nav-link.active,
+	.show > .nav-link {
+		color: var(--#{$prefix}nav-pills-link-active-color);
+		@include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
+	}
+}
+
+//
+// Underline
+//
+
+.nav-underline {
+	// scss-docs-start nav-underline-css-vars
+	--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
+	--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
+	--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
+	// scss-docs-end nav-underline-css-vars
+
+	gap: var(--#{$prefix}nav-underline-gap);
+
+	.nav-link {
+		padding-right: 0;
+		padding-left: 0;
+		border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
+
+		&:hover,
+		&:focus {
+			border-bottom-color: currentcolor;
+		}
+	}
+
+	.nav-link.active,
+	.show > .nav-link {
+		font-weight: $font-weight-bold;
+		color: var(--#{$prefix}nav-underline-link-active-color);
+		border-bottom-color: currentcolor;
+	}
+}
+
+//
+// Justified variants
+//
+
+.nav-fill {
+	> .nav-link,
+	.nav-item {
+		flex: 1 1 auto;
+		text-align: center;
+	}
+}
+
+.nav-justified {
+	> .nav-link,
+	.nav-item {
+		flex-basis: 0;
+		flex-grow: 1;
+		text-align: center;
+	}
+}
+
+.nav-fill,
+.nav-justified {
+	.nav-item .nav-link {
+		width: 100%; // Make sure button will grow
+	}
+}
+
+// Tabbable tabs
+//
+// Hide tabbable panes to start, show them when `.active`
+
+.tab-content {
+	> .tab-pane {
+		display: none;
+	}
+	> .active {
+		display: block;
+	}
+}
+
+.nav {
+	.nav-item {
+		width: 100%;
+		text-align: center;
+	}
+}
+
+@include media-breakpoint-down(md){
+	.navbar-nav {
+		padding:0;
+		
+		.nav-item {
+			.nav-link {
+				font-size: var(--#{$prefix}nav-item-font-size);
+				text-align:center;
+			}
+			width: 100%;
+			border-bottom: var(--#{$prefix}nav-border-thickness) var(--#{$prefix}nav-border-style)
+				var(--#{$prefix}nav-border-color);
+			&:last-child {
+				border: none;
+			}
+		}
+	}
+}

css/scss/bootstrap/_navbar.scss

@@ -0,0 +1,350 @@
+// Navbar
+//
+// Provide a static navbar from which we expand to create full-width, fixed, and
+// other navbar variations.
+
+.navbar {
+	// scss-docs-start navbar-css-vars
+	--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
+	--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
+	--#{$prefix}navbar-color: #{$navbar-light-color};
+	--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
+	--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
+	--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
+	--#{$prefix}navbar-brand-padding-x: #{$navbar-brand-padding-x};
+	--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
+	--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
+	--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
+	--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
+	--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+	--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
+	--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
+	--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
+	--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
+	--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+	--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+	--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
+	--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
+	--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
+	--#{$prefix}navbar-buttons-border-color: #{$navbar-buttons-border-color};
+	--#{$prefix}navbar-buttons-border-style: #{$navbar-buttons-border-style};
+	--#{$prefix}navbar-buttons-border-width: #{$navbar-buttons-border-thickness};
+	// scss-docs-end navbar-css-vars
+
+	position: relative;
+	display: flex;
+	flex-wrap: wrap; // allow us to do the line break for collapsing content
+	align-items: center;
+	justify-content: space-between; // space out brand from logo
+	padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
+	@include gradient-bg();
+	border-bottom: var(--#{$prefix}navbar-buttons-border-width)
+		var(--#{$prefix}navbar-buttons-border-style) var(--#{$prefix}navbar-buttons-border-color);
+	// Because flex properties aren't inherited, we need to redeclare these first
+	// few properties so that content nested within behave properly.
+	// The `flex-wrap` property is inherited to simplify the expanded navbars
+	%container-flex-properties {
+		display: flex;
+		flex-wrap: inherit;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	> .container,
+	> .container-fluid {
+		@extend %container-flex-properties;
+	}
+
+	@each $breakpoint, $container-max-width in $container-max-widths {
+		> .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+			@extend %container-flex-properties;
+		}
+	}
+	.buttons {
+		display: flex;
+		order: 999;
+		width: max-content;
+		height: 100%;
+		align-items: center;
+		button {
+			border-left-width: var(--#{$prefix}navbar-buttons-border-width);
+			border-left-style: var(--#{$prefix}navbar-buttons-border-style);
+			border-left-color: var(--#{$prefix}navbar-buttons-border-color);
+			border-radius: 0;
+
+			padding: 0.25rem;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+			display: flex;
+		}
+		a .helper, button .helper {
+			font-family: #{$display-font-family};
+			font-size: 1rem;
+			font-weight: 600;
+			padding-inline: 0.25rem;
+		}
+		a,button{
+			display:flex; align-items: center
+		}
+	}
+	@include media-breakpoint-down(md){
+		.buttons {
+			border-left-width: var(--#{$prefix}navbar-buttons-border-width);
+			border-left-style: var(--#{$prefix}navbar-buttons-border-style);
+			border-left-color: var(--#{$prefix}navbar-buttons-border-color);
+			button {
+				border: 0;
+				aspect-ratio: 1/1;
+			}
+			a .helper, button .helper {
+				display: none;
+			}
+		}
+	}
+}
+
+// Navbar brand
+//
+// Used for brand, project, or site names.
+
+.navbar-brand {
+	padding-block: var(--#{$prefix}navbar-brand-padding-y);
+	padding-inline: var(--#{$prefix}navbar-brand-padding-x);
+	margin-right: var(--#{$prefix}navbar-brand-margin-end);
+	@include font-size(var(--#{$prefix}navbar-brand-font-size));
+	color: var(--#{$prefix}navbar-brand-color);
+	text-decoration: if($link-decoration == none, null, none);
+	white-space: nowrap;
+	height: 2.5rem;
+	&:hover,
+	&:focus {
+		color: var(--#{$prefix}navbar-brand-hover-color);
+		text-decoration: if($link-hover-decoration == underline, none, null);
+	}
+}
+
+// Navbar nav
+//
+// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
+
+.navbar-nav {
+	// scss-docs-start navbar-nav-css-vars
+	--#{$prefix}nav-border-thickness: 1px;
+	--#{$prefix}nav-border-style: solid;
+	--#{$prefix}nav-border-color: #{$navbar-buttons-border-color};
+	--#{$prefix}nav-border-radius: 2rem 0.25rem;
+	--#{$prefix}nav-link-padding-x: 0;
+	--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+	@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+	--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+	--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
+	--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
+	--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
+	// scss-docs-end navbar-nav-css-vars
+
+	display: flex;
+	flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
+	padding-left: 0;
+	margin-bottom: 0;
+	list-style: none;
+
+	@include media-breakpoint-down(md){
+		border-width: var(--#{$prefix}nav-border-thickness);
+		border-style: var(--#{$prefix}nav-border-style);
+		border-color: var(--#{$prefix}nav-border-color);
+		border-radius: var(--#{$prefix}nav-border-radius);
+	}
+
+	.nav-link {
+		&.active,
+		&.show {
+			color: var(--#{$prefix}navbar-active-color);
+		}
+	}
+
+	.dropdown-menu {
+		position: static;
+	}
+}
+
+// Navbar text
+//
+//
+
+.navbar-text {
+	padding-top: $nav-link-padding-y;
+	padding-bottom: $nav-link-padding-y;
+	color: var(--#{$prefix}navbar-color);
+
+	a,
+	a:hover,
+	a:focus {
+		color: var(--#{$prefix}navbar-active-color);
+	}
+}
+
+// Responsive navbar
+//
+// Custom styles for responsive collapsing and toggling of navbar contents.
+// Powered by the collapse Bootstrap JavaScript plugin.
+
+// When collapsed, prevent the toggleable navbar contents from appearing in
+// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
+// on the `.navbar` parent.
+.navbar-collapse {
+	flex-basis: 100%;
+	flex-grow: 1;
+	// For always expanded or extra full navbars, ensure content aligns itself
+	// properly vertically. Can be easily overridden with flex utilities.
+	align-items: center;
+}
+
+// Button for toggling the navbar when in its collapsed state
+.navbar-toggler {
+	padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
+	@include font-size(var(--#{$prefix}navbar-toggler-font-size));
+	line-height: 1;
+	aspect-ratio: 1/1;
+	color: var(--#{$prefix}navbar-color);
+	background-color: transparent; // remove default button style
+	border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
+	@include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
+	@include transition(var(--#{$prefix}navbar-toggler-transition));
+
+	&:hover {
+		text-decoration: none;
+	}
+
+	&:focus {
+		text-decoration: none;
+		outline: 0;
+		box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
+	}
+}
+
+// Keep as a separate element so folks can easily override it with another icon
+// or image file as needed.
+.navbar-toggler-icon {
+	display: inline-block;
+	width: 1.5em;
+	height: 1.5em;
+	vertical-align: middle;
+	background-image: var(--#{$prefix}navbar-toggler-icon-bg);
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 100%;
+}
+
+.navbar-nav-scroll {
+	max-height: var(--#{$prefix}scroll-height, 75vh);
+	overflow-y: auto;
+}
+
+// scss-docs-start navbar-expand-loop
+// Generate series of `.navbar-expand-*` responsive classes for configuring
+// where your navbar collapses.
+.navbar-expand {
+	@each $breakpoint in map-keys($grid-breakpoints) {
+		$next: breakpoint-next($breakpoint, $grid-breakpoints);
+		$infix: breakpoint-infix($next, $grid-breakpoints);
+
+		// stylelint-disable-next-line scss/selector-no-union-class-name
+		&#{$infix} {
+			@include media-breakpoint-up($next) {
+				flex-wrap: nowrap;
+				justify-content: flex-start;
+
+				.navbar-nav {
+					flex-direction: row;
+
+					.dropdown-menu {
+						position: absolute;
+					}
+
+					.nav-link {
+						padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
+						padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
+					}
+				}
+
+				.navbar-nav-scroll {
+					overflow: visible;
+				}
+
+				.navbar-collapse {
+					display: flex !important; // stylelint-disable-line declaration-no-important
+					flex-basis: auto;
+				}
+
+				.navbar-toggler {
+					display: none;
+				}
+
+				.offcanvas {
+					// stylelint-disable declaration-no-important
+					position: static;
+					z-index: auto;
+					flex-grow: 1;
+					width: auto !important;
+					height: auto !important;
+					visibility: visible !important;
+					background-color: transparent !important;
+					border: 0 !important;
+					transform: none !important;
+					@include box-shadow(none);
+					@include transition(none);
+					// stylelint-enable declaration-no-important
+
+					.offcanvas-header {
+						display: none;
+					}
+
+					.offcanvas-body {
+						display: flex;
+						flex-grow: 0;
+						padding: 0;
+						overflow-y: visible;
+					}
+				}
+			}
+		}
+	}
+}
+// scss-docs-end navbar-expand-loop
+
+// Navbar themes
+//
+// Styles for switching between navbars with light or dark background.
+
+.navbar-light {
+	@include deprecate('`.navbar-light`', 'v5.2.0', 'v6.0.0', true);
+}
+
+.navbar-dark,
+.navbar[data-bs-theme='dark'] {
+	// scss-docs-start navbar-dark-css-vars
+	--#{$prefix}navbar-color: #{$navbar-dark-color};
+	--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
+	--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
+	--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
+	--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
+	--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
+	--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
+	--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+	// scss-docs-end navbar-dark-css-vars
+}
+
+@if $enable-dark-mode {
+	@include color-mode(dark) {
+		.navbar-toggler-icon {
+			--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+		}
+	}
+}
+
+.navbar {
+	.offcanvas-header {
+		flex-direction: column;
+	}
+}

css/scss/bootstrap/_typography.scss

@@ -1,10 +1,9 @@
 %heading {
 	margin-top: 0; // 1
-	margin-bottom: .25em;
+	margin-bottom: 0.25em;
 	font-family: $headings-font-family;
 	font-optical-sizing: auto;
 	font-style: $headings-font-style;
-	font-weight: $headings-font-weight;
 	color: var(--#{$prefix}heading-color);
 }
 
@@ -22,40 +21,47 @@ a {
 h1 {
 	@extend %heading;
 	@include font-size($h1-font-size);
+	font-weight: $headings-font-bold;
 	line-height: 1.48;
 }
 
 h2 {
 	@extend %heading;
 	@include font-size($h2-font-size);
+	font-weight: $headings-font-bold;
 	line-height: 1.5;
 }
 
 h3 {
 	@extend %heading;
 	@include font-size($h3-font-size);
+	font-weight: $headings-font-bold;
 	line-height: 1.52;
 }
 
 h4 {
 	@extend %heading;
 	@include font-size($h4-font-size);
+	font-weight: $headings-font-medium;
 	line-height: 1.5;
 }
 
 h5 {
 	@extend %heading;
 	@include font-size($h5-font-size);
+	font-weight: $headings-font-medium;
 	line-height: 1.5;
 }
 
 h6 {
 	@extend %heading;
 	@include font-size($h6-font-size);
+	font-weight: $headings-font-medium;
 	line-height: 1.52;
 }
 
 p {
+	text-wrap: balance;
 	max-width: 80ch;
 }
 
@@ -65,3 +71,32 @@ p {
 	font-weight: 500;
 	font-size: 21px;
 }
+
+p.first-paragraph {
+	font-size: 1.125em;
+}
+
+p.first-paragraph:first-line {
+	color: var(--#{$prefix}primary);
+	text-transform: uppercase;
+	font-size: 0.85em;
+	font-weight: bold;
+}
+
+[data-#{$prefix}theme='dark'] {
+	p.first-paragraph:first-line {
+		color: var(--#{$prefix}primary-text-emphasis);
+	}
+}
+
+@include media-breakpoint-down(lg) {
+	p.first-paragraph br {
+		display: none;
+	}
+}
+
+smaller,
+.smaller {
+	@include rfs($smaller-font-size, --#{$prefix}smaller-font-size);
+	font-size: $smaller-font-size;
+}

css/scss/bootstrap/_utilities.scss

@@ -1,6 +1,14 @@
 $utilities: map-merge(
 	$utilities,
 	(
+		'display': (
+			responsive: true,
+			print: true,
+			property: display,
+			class: d,
+			values: inline inline-block block grid inline-grid table table-row table-cell contents flex
+				inline-flex none
+		),
 		'color':
 			map-merge(
 				map-get($utilities, 'color'),
@@ -10,7 +18,7 @@ $utilities: map-merge(
 			),
 		'text-wrap': (
 			property: 'text-wrap',
-			values: wrap nowrap pretty balance,
+			values: wrap nowrap pretty stable balance,
 			class: 'text-wrap'
 		),
 		'font-family': (
@@ -23,8 +31,21 @@ $utilities: map-merge(
 			),
 			class: 'font-family'
 		),
+		'font-weight': (
+			property: font-weight,
+			class: fw,
+			values: (
+				light: $font-weight-light,
+				lighter: $font-weight-lighter,
+				normal: $font-weight-normal,
+				bold: $font-weight-bold,
+				bolder: $font-weight-bolder,
+				black: $font-weight-black
+			)
+		),
 		'width': (
 			property: width,
+			responsive: true,
 			class: w,
 			values: (
 				0: 0,
@@ -43,6 +64,7 @@ $utilities: map-merge(
 		),
 		'height': (
 			property: height,
+			responsive: true,
 			class: h,
 			values: (
 				0: 0,
@@ -140,19 +162,19 @@ $utilities: map-merge(
 			class: overflow,
 			property: overflow,
 			responsive: true,
-			values: hidden visible clip scroll auto 
+			values: hidden visible clip scroll auto
 		),
 		'overflow-x': (
 			class: overflow-x,
 			property: overflow-x,
 			responsive: true,
-			values: hidden visible clip scroll auto 
+			values: hidden visible clip scroll auto
 		),
 		'overflow-y': (
 			class: overflow-y,
 			property: overflow-y,
 			responsive: true,
-			values: hidden visible clip scroll auto 
+			values: hidden visible clip scroll auto
 		),
 		'position': (
 			property: position,

css/scss/bootstrap/_variables.scss

@@ -1,4 +1,4 @@
-$prefix: 'bs-';	
+$prefix: 'bs-';
 
 $primary: #005eb8;
 $secondary: #e93cac;
@@ -15,14 +15,18 @@ $body-bg: $light;
 $body-color-dark: $light;
 $body-bg-dark: $dark;
 
-$font-family-base: 'Sentient';
+$font-family-base: 'Sentient', serif;
 $font-family-sans: 'Libre Franklin', sans-serif;
 $font-family-code: 'Azeret Mono', monospace;
 $display-font-family: 'Cormorant', serif;
 $headings-font-family: 'Libre Franklin', sans-serif;
+$headings-font-bold: 700 !important;
+$headings-font-medium: 500 !important;
+$font-weight-black: 900;
 
 $font-size-base: 1rem;
 $small-font-size: 0.875em;
+$smaller-font-size: 10px;
 $code-font-size: 0.85em;
 
 $h1-font-size: $font-size-base * 2.5;
@@ -77,7 +81,39 @@ $position-values: (
 	auto: auto
 ) !default;
 
+$navbar-padding-x: 0;
+$navbar-padding-y: 0;
+
+$navbar-toggler-padding-y: 0;
+$navbar-toggler-padding-x: 0;
+
+$navbar-brand-padding-y: 0.25rem;
+$navbar-brand-padding-x: 0.25rem;
+
+$navbar-light-toggler-border-color: transparent;
+
+$navbar-toggler-font-size: 1.5rem;
+$navbar-toggler-border-radius: none;
+
+$navbar-buttons-border-color: rgba(0, 0, 0, 0.125);
+$navbar-buttons-border-style: solid;
+$navbar-buttons-border-thickness: 1px;
+
+$nav-link-padding-x: 0;
+$nav-link-padding-y: 0.25rem;
+
+$nav-item-font-size: 1.25rem;
+
 :root {
 	--#{$prefix}badge-border-radius: var(--#{$prefix}badge-border-radius);
 }
 
+$link-color: $dark;
+
+$gnosis-sidebar-border-width: 0 1px 0 0;
+$gnosis-sidebar-mobile-border-width: 1px 0 0;
+$gnosis-sidebar-border-style: solid;
+$gnosis-sidebar-border-color: rgba(0, 0, 0, 0.25);
+$gnosis-sidebar-item-border-width: 0 0 1px 0;
+
+$grid-row-columns:  12;

css/scss/bootstrap/g-components/_sidebar.scss

@@ -0,0 +1,99 @@
+$customPrefix: 'bs-';
+
+.g-sidebar {
+	--#{$customPrefix}sidebar-border-width: #{$gnosis-sidebar-border-width};
+	--#{$customPrefix}sidebar-border-style: #{$gnosis-sidebar-border-style};
+	--#{$customPrefix}sidebar-border-color: #{$gnosis-sidebar-border-color};
+	--#{$customPrefix}sidebar-mobile-border-width: #{$gnosis-sidebar-mobile-border-width};
+	--#{$customPrefix}sidebar-item-border-width: #{$gnosis-sidebar-item-border-width};
+
+	display: flex;
+	flex-direction: column;
+
+	width: 100%;
+	height: 100%;
+
+	border-width: var(--#{$customPrefix}sidebar-border-width);
+	border-style: var(--#{$customPrefix}sidebar-border-style);
+	border-color: var(--#{$customPrefix}sidebar-border-color);
+
+	a.g-sidebar-item {
+		transition: all 0.25s ease-in;
+		* {
+			transition: all 0.25s ease-in;
+		}
+		@media (prefers-reduced-motion) {
+			* {
+				transition: none;
+			}
+		}
+
+		padding: 1rem;
+		width: 100%;
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		text-wrap: wrap;
+		border-width: var(--#{$customPrefix}sidebar-item-border-width);
+		border-style: var(--#{$customPrefix}sidebar-border-style);
+		border-color: var(--#{$customPrefix}sidebar-border-color);
+
+		text-decoration: none;
+
+		h6 {
+			padding: 0;
+			margin: 0;
+			line-height: 1;
+		}
+
+		span.helper {
+			font-size: 0.825rem;
+			width: 100%;
+			flex-shrink: 0;
+			padding: 0;
+			opacity: 0.75;
+		}
+		&:hover {
+			span.helper {
+				opacity: 1;
+			}
+		}
+	}
+
+	@include media-breakpoint-down(md) {
+		position: fixed;
+		flex-direction: row;
+		align-items: center;
+		max-width: unset;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		height: 3rem;
+		border: 0;
+
+		border-width: var(--#{$customPrefix}sidebar-mobile-border-width);
+		border-style: var(--#{$customPrefix}sidebar-border-style);
+		border-color: var(--#{$customPrefix}sidebar-border-color);
+
+		a.g-sidebar-item {
+			flex-direction: column;
+			padding: 0.25rem;
+			flex-wrap: nowrap;
+			justify-content: center;
+			height: 100%;
+			opacity: 0.5;
+			&.active,
+			&:hover {
+				opacity: 1;
+			}
+			h6 {
+				font-size: $smaller-font-size;
+				font-weight: semibold;
+			}
+
+			span.helper {
+				display: none;
+			}
+		}
+	}
+}