diff --git a/src/header.pug b/src/header.pug index 3de936b..552f26f 100644 --- a/src/header.pug +++ b/src/header.pug @@ -1,6 +1,9 @@ -.logo - solid-link(next='dashboard') - img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`) +.header-left + .logo + solid-link(next='dashboard') + img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`) + + span.beta-tag Beta solid-notifications.notLoggedIn( nested-field="inbox" diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index 7966a19..1f7f663 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -26,6 +26,34 @@ } } + .header-left { + flex-grow: 1; + position: relative; + + .logo { + display: inline-block; + } + + .beta-tag { + display: none; + + @include breakpoint(lg) { + display: inline-block; + font-size: 1.4rem; + font-weight: 600; + line-height: 19px; + letter-spacing: 0.19px; + padding: 3px 13px 3px 15px; + border-radius: 3px; + background: var(--color-primary); + color: var(--color-complementary); + position: absolute; + top: -9px; + left: 267px; + } + } + } + >*:not(:first-child) { margin-left: 2rem; @@ -34,15 +62,15 @@ } } - .logo { - flex: 1 0 0; - align-items: stretch; - } - - /* To remove the place taken by this element */ + /* Fix: to remove the place taken by these elements */ solid-widget[name='hubl-user-avatar'] { display: contents; } + + solid-notifications-template[data-rdf-type='hd:circle'], + solid-notifications-template[data-rdf-type='foaf:user'] { + position: absolute; + } } /* General styling for both notification and user's panel */ diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index 9454ebe..012f7ce 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -8,6 +8,10 @@ &.with-padding { padding: 1.3rem; + + @include breakpoint(lg) { + padding: 2.5rem; + } } }