From 292ae05bf8c4febc7f31545e98184137820470b4 Mon Sep 17 00:00:00 2001 From: melissawm Date: Thu, 8 Dec 2022 18:02:25 -0300 Subject: [PATCH 1/3] Add basic configuration for announcement banner See the pydata-sphinx-theme for details. --- .../assets/styles/_announcement.scss | 40 +++++++++++++++++++ .../assets/styles/index.scss | 1 + .../napari_sphinx_theme/announcement.html | 24 +++++++++++ .../theme/napari_sphinx_theme/layout.html | 6 +-- .../theme/napari_sphinx_theme/theme.conf | 1 + 5 files changed, 69 insertions(+), 3 deletions(-) create mode 100644 src/napari_sphinx_theme/assets/styles/_announcement.scss create mode 100644 src/napari_sphinx_theme/theme/napari_sphinx_theme/announcement.html 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..f6879640 --- /dev/null +++ b/src/napari_sphinx_theme/assets/styles/_announcement.scss @@ -0,0 +1,40 @@ +$announcement-height: 3rem; +.bd-header-announcement { + height: $announcement-height; + width: 100%; + display: flex; + position: relative; + align-items: center; + justify-content: center; + padding: 0.5rem 12.5%; // Horizontal padding so the width is 75% + @include media-breakpoint-down(md) { + // Announcements can take a bit more width on mobile + padding: 0.5rem 2%; + } + + &:before { + height: 20rem + } + + p { + font-weight: bold; + margin: 0; + } + + // The same background color transparency hack we use in admonitions + &:after { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + background-color: var(--pst-color-info); + opacity: 0.2; + content: ""; + z-index: -1; // So it doesn't hover over the content + } + + &:empty { + display: none; + } +} 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 = From 3091839b3a333784d1851017c5da040dede53283 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Mon, 12 Dec 2022 16:04:26 -0800 Subject: [PATCH 2/3] Announcement styling --- .../assets/scss/components/app-bar.scss | 4 +- .../assets/styles/_announcement.scss | 45 +++++-------------- tailwind.config.js | 16 +++++++ 3 files changed, 30 insertions(+), 35 deletions(-) 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/styles/_announcement.scss b/src/napari_sphinx_theme/assets/styles/_announcement.scss index f6879640..f2261660 100644 --- a/src/napari_sphinx_theme/assets/styles/_announcement.scss +++ b/src/napari_sphinx_theme/assets/styles/_announcement.scss @@ -1,40 +1,17 @@ -$announcement-height: 3rem; .bd-header-announcement { - height: $announcement-height; - width: 100%; - display: flex; - position: relative; align-items: center; + background: theme('colors.hub-primary.200') !important; + display: flex; + font-weight: bold; justify-content: center; - padding: 0.5rem 12.5%; // Horizontal padding so the width is 75% - @include media-breakpoint-down(md) { - // Announcements can take a bit more width on mobile - padding: 0.5rem 2%; - } - - &:before { - height: 20rem - } - - p { - font-weight: bold; - margin: 0; - } - - // The same background color transparency hack we use in admonitions - &:after { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - background-color: var(--pst-color-info); - opacity: 0.2; - content: ""; - z-index: -1; // So it doesn't hover over the content - } + margin-top: 64px; + padding: 16px; + position: relative; + text-align: center; + width: 100%; - &:empty { - display: none; + font-size: 11px; + @screen screen-495 { + font-size: 14px; } } 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) => ({ From 01da66135272950cd8a459a88c89aa06c88532f0 Mon Sep 17 00:00:00 2001 From: Jeremy Asuncion Date: Mon, 12 Dec 2022 18:46:15 -0800 Subject: [PATCH 3/3] Fix padding for page --- src/napari_sphinx_theme/assets/scss/global.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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;