Navbar logotype divided into two separate links

flotiq · Sep 24, 2024 · a454a2f · a454a2f
1 parent 85e57e8
commit a454a2f
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 19 deletions.
diff --git a/docs/API/images/docs-badge.svg b/docs/API/images/docs-badge.svg
diff --git a/docs/API/images/flotiq-badge-logo.svg b/docs/API/images/flotiq-badge-logo.svg
diff --git a/docs/API/images/flotiq-logo-wt.svg b/docs/API/images/flotiq-logo-wt.svg
diff --git a/docs/css/flotiq.css b/docs/css/flotiq.css
@@ -556,6 +556,15 @@ li.md-nav__item.md-nav__item--active:not(.md-nav__item--nested) {
   width: unset;
 }
 
+.md-header__button.md-logo.docs-badge {
+  padding-left: 0;
+  margin-left: 0;
+}
+
+.md-header__button.md-logo.docs-badge img{
+  width: 50px;
+}
+
 @media screen and (min-width: 76.25em) {
   .md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link .md-nav__icon, .md-nav__item--nested .md-nav__toggle:indeterminate ~ .md-nav__link .md-nav__icon {
     color: #0083FC;

diff --git a/theme/partials/header.html b/theme/partials/header.html
@@ -30,25 +30,46 @@
             aria-label="{{ lang.t('header.title') }}"
     >
         <div style="display: flex; align-content: center;">
-            <!-- Link to home -->
-            <a
-                    href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
-                    title="{{ config.site_name | e }}"
-                    class="md-header__button md-logo desktop"
-                    aria-label="{{ config.site_name }}"
-                    data-md-component="logo"
-            >
-                <img src="{{ 'API/images/full_logo.svg' | url }}" alt="Flotiq">
-            </a>
-            <a
-                    href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
-                    title="{{ config.site_name | e }}"
-                    class="md-header__button md-logo mobile"
-                    aria-label="{{ config.site_name }}"
-                    data-md-component="logo"
-            >
-                <img src="{{ 'API/images/small_logo.svg' | url }}" alt="Flotiq">
-            </a>
+            <div style="display: flex; align-items: center;">
+                <a
+                        href="http://flotiq.com/"
+                        title="{{ config.site_name | e }}"
+                        class="md-header__button md-logo desktop"
+                        aria-label="{{ config.site_name }}"
+                        data-md-component="logo"
+                >
+                    <img src="{{ 'API/images/flotiq-logo-wt.svg' | url }}" alt="Flotiq">
+                </a>
+                <a
+                        href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
+                        title="{{ config.site_name | e }}"
+                        class="md-header__button md-logo docs-badge desktop"
+                        aria-label="{{ config.site_name }}"
+                        data-md-component="logo"
+                >
+                    <img src="{{ 'API/images/docs-badge.svg' | url }}" alt="Flotiq">
+                </a>
+            </div>
+            <div style="display: flex; align-items: center;">
+                <a
+                        href="http://flotiq.com/"
+                        title="{{ config.site_name | e }}"
+                        class="md-header__button md-logo mobile"
+                        aria-label="{{ config.site_name }}"
+                        data-md-component="logo"
+                >
+                    <img src="{{ 'API/images/flotiq-badge-logo.svg' | url }}" alt="Flotiq">
+                </a>
+                <a
+                        href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
+                        title="{{ config.site_name | e }}"
+                        class="md-header__button md-logo docs-badge mobile"
+                        aria-label="{{ config.site_name }}"
+                        data-md-component="logo"
+                >
+                    <img src="{{ 'API/images/docs-badge.svg' | url }}" alt="Flotiq">
+                </a>
+            </div>
         </div>
         <div>
             <!-- Color palette -->