From 7ac1327fa6d7fd13b660c553e957aee1669fe477 Mon Sep 17 00:00:00 2001 From: Stasia Michalska Date: Sun, 30 Nov 2025 15:21:39 +0100 Subject: [PATCH] Make the sidebar Rebble branded Signed-off-by: Stasia Michalska --- source/_includes/icons/rebble.svg | 31 ++++ source/_layouts/sidebar_narrow.html | 2 +- source/_layouts/sidebar_wide.html | 4 +- source/_sass/colors.scss | 1 + source/_sass/elements/sidebar.scss | 22 ++- .../images/menu/devportal-background.svg | 158 ++++++++++++++++++ source/assets/images/menu/rocket.svg | 12 ++ 7 files changed, 222 insertions(+), 8 deletions(-) create mode 100644 source/_includes/icons/rebble.svg create mode 100644 source/assets/images/menu/devportal-background.svg create mode 100644 source/assets/images/menu/rocket.svg diff --git a/source/_includes/icons/rebble.svg b/source/_includes/icons/rebble.svg new file mode 100644 index 0000000..7686001 --- /dev/null +++ b/source/_includes/icons/rebble.svg @@ -0,0 +1,31 @@ + + + + + + + + + diff --git a/source/_layouts/sidebar_narrow.html b/source/_layouts/sidebar_narrow.html index 91e72ca..f6449e1 100644 --- a/source/_layouts/sidebar_narrow.html +++ b/source/_layouts/sidebar_narrow.html @@ -19,7 +19,7 @@
- pebble + {% include icons/rebble.svg %}Rebble
diff --git a/source/_sass/colors.scss b/source/_sass/colors.scss index 49efc21..85bf89c 100644 --- a/source/_sass/colors.scss +++ b/source/_sass/colors.scss @@ -88,6 +88,7 @@ $color-sdk: $lightblue; $color-appstore: $gray-03; $color-blog: $orange-02; $color-examples: #2c67ce; +$color-devportal: #00c3fd; $modifier-color-names: 'guides', 'docs', 'community', 'more', 'getting-started', 'sdk', 'appstore', 'blog'; diff --git a/source/_sass/elements/sidebar.scss b/source/_sass/elements/sidebar.scss index cab9b51..911f324 100644 --- a/source/_sass/elements/sidebar.scss +++ b/source/_sass/elements/sidebar.scss @@ -70,6 +70,11 @@ $sidebar-hide-at: xs; color: $white; } + svg { + display: inline-block; + vertical-align: bottom; + } + span { display: inline-block; } @@ -131,10 +136,10 @@ $sidebar-hide-at: xs; } .sidebar__footer { - background-color: $color-appstore; - border-right: 1px solid color.adjust($color-appstore, $lightness: -10%, $space: hsl); + background-color: $color-devportal; + border-right: 1px solid color.adjust($color-devportal, $lightness: -10%, $space: hsl); bottom: 0; - color: $white; + color: $black; font-weight: bold; height: 3 * $base-line-height; left: 0; @@ -143,11 +148,18 @@ $sidebar-hide-at: xs; right: 0; text-align: center; text-transform: uppercase; + transition-duration: 0.5s; + transition-property: background, color; + display: flex; + align-items: center; + justify-content: center; + gap: 0.25rem; &:hover, &.active { - background-color: color.adjust($color-appstore, $lightness: -10%, $space: hsl); - border-color: color.adjust($color-appstore, $lightness: -20%, $space: hsl); + background-color: color.adjust($color-devportal, $lightness: -40%, $space: hsl); + background-image: url('/assets/images/menu/devportal-background.svg'); + border-color: color.adjust($color-devportal, $lightness: -50%, $space: hsl); color: $white; } } diff --git a/source/assets/images/menu/devportal-background.svg b/source/assets/images/menu/devportal-background.svg new file mode 100644 index 0000000..3e315a9 --- /dev/null +++ b/source/assets/images/menu/devportal-background.svg @@ -0,0 +1,158 @@ + + + + diff --git a/source/assets/images/menu/rocket.svg b/source/assets/images/menu/rocket.svg new file mode 100644 index 0000000..376a7e7 --- /dev/null +++ b/source/assets/images/menu/rocket.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + +