diff --git a/src/napari_sphinx_theme/assets/scss/components/app-bar.scss b/src/napari_sphinx_theme/assets/scss/components/app-bar.scss index 6a1970e7..8507629f 100644 --- a/src/napari_sphinx_theme/assets/scss/components/app-bar.scss +++ b/src/napari_sphinx_theme/assets/scss/components/app-bar.scss @@ -1,6 +1,8 @@ @import '@/scss/utils'; .navbar { + height: 64px; + &, &-light { @apply tw-shadow-none; @@ -52,7 +54,7 @@ @media (min-width: 960px) { a { - padding: 0 to-rem(17px) to-rem(20px) !important; + padding: 0 to-rem(17px) to-rem(10px) !important; margin-top: to-rem(20px) !important; border-bottom: to-rem(3px) solid transparent; } diff --git a/src/napari_sphinx_theme/assets/scss/global.scss b/src/napari_sphinx_theme/assets/scss/global.scss index 916ac23d..b7c7d97e 100644 --- a/src/napari_sphinx_theme/assets/scss/global.scss +++ b/src/napari_sphinx_theme/assets/scss/global.scss @@ -26,7 +26,7 @@ body { } .napari-page { - @apply tw-grid tw-justify-center tw-gap-6 tw-pt-32 tw-flex-auto; + @apply tw-grid tw-justify-center tw-gap-6 tw-pt-12 tw-flex-auto; grid-template-columns: 1fr; diff --git a/src/napari_sphinx_theme/assets/styles/_announcement.scss b/src/napari_sphinx_theme/assets/styles/_announcement.scss new file mode 100644 index 00000000..f2261660 --- /dev/null +++ b/src/napari_sphinx_theme/assets/styles/_announcement.scss @@ -0,0 +1,17 @@ +.bd-header-announcement { + align-items: center; + background: theme('colors.hub-primary.200') !important; + display: flex; + font-weight: bold; + justify-content: center; + margin-top: 64px; + padding: 16px; + position: relative; + text-align: center; + width: 100%; + + font-size: 11px; + @screen screen-495 { + font-size: 14px; + } +} diff --git a/src/napari_sphinx_theme/assets/styles/index.scss b/src/napari_sphinx_theme/assets/styles/index.scss index be386c83..7515c864 100644 --- a/src/napari_sphinx_theme/assets/styles/index.scss +++ b/src/napari_sphinx_theme/assets/styles/index.scss @@ -25,6 +25,7 @@ $grid-breakpoints: ( @import "./api"; @import "./markdown"; @import "./versionmodified"; +@import "./announcement"; // Custom css, TODO: to be refactored in different partials // GitHub blockquote style diff --git a/src/napari_sphinx_theme/theme/napari_sphinx_theme/announcement.html b/src/napari_sphinx_theme/theme/napari_sphinx_theme/announcement.html new file mode 100644 index 00000000..2df8de6f --- /dev/null +++ b/src/napari_sphinx_theme/theme/napari_sphinx_theme/announcement.html @@ -0,0 +1,24 @@ +{%- if theme_announcement -%} + +{% set is_remote=theme_announcement.startswith("http") %} + +{# If we are remote, add a script to make an HTTP request for the value on page load #} +{%- if is_remote %} + +{% endif %} + +
+ {#- if announcement text is not remote, populate announcement w/ local content -#} + {%- if not is_remote %} +
{{ theme_announcement }}
+ {%- endif -%} +
+ +{%- endif %} diff --git a/src/napari_sphinx_theme/theme/napari_sphinx_theme/layout.html b/src/napari_sphinx_theme/theme/napari_sphinx_theme/layout.html index e4899898..74020a40 100644 --- a/src/napari_sphinx_theme/theme/napari_sphinx_theme/layout.html +++ b/src/napari_sphinx_theme/theme/napari_sphinx_theme/layout.html @@ -37,15 +37,15 @@ {%- endblock %} {%- block content %} - {# Added to support a banner with an alert #} - - {% block docs_navbar %} {% endblock %} + {# Added to support a banner with an alert #} + {%- include "announcement.html" -%} +
{% block docs_sidebar %} {% if sidebars %} diff --git a/src/napari_sphinx_theme/theme/napari_sphinx_theme/theme.conf b/src/napari_sphinx_theme/theme/napari_sphinx_theme/theme.conf index f835d418..286e2595 100644 --- a/src/napari_sphinx_theme/theme/napari_sphinx_theme/theme.conf +++ b/src/napari_sphinx_theme/theme/napari_sphinx_theme/theme.conf @@ -34,3 +34,4 @@ left_sidebar_end = sidebar-ethical-ads.html footer_items = napari-footer-links.html, napari-copyright.html page_sidebar_items = page-toc.html, edit-this-page.html switcher = +announcement = diff --git a/tailwind.config.js b/tailwind.config.js index dcf115c3..a90daa73 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -50,6 +50,22 @@ module.exports = { 'napari-error': colors.error, 'napari-gray': colors.gray, 'napari-dark-gray': colors.darkGray, + + 'hub-gray': { + 100: '#f7f7f7', + 200: '#eaeaea', + 300: '#cccccc', + 400: '#999999', + 500: '#686868', + }, + + 'hub-primary': { + 100: '#ecf8ff', + 200: '#d2efff', + 400: '#80d1ff', + 500: '#68c8ff', + 600: '#009BF2', + }, }, width: (theme) => ({