Merge pull request #127 from melissawm/add-banner

napari · Dec 13, 2022 · 7c38444 · 7c38444
2 parents dab5902 + 01da661
commit 7c38444
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 5 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 %}
+<script>
+$.get("{{ theme_announcement }}", success=(data)=>{
+      $("#header-announcement").html(`<div class="bd-header-announcement__content">${data}</div>`);
+  }).fail(() => {
+  console.log("[PST]: Failed to load announcement at: {{ theme_announcement }}")
+});
+
+</script>
+{% endif %}
+
+<div class="bd-header-announcement container-fluid" id="header-announcement">
+  {#- if announcement text is not remote, populate announcement w/ local content -#}
+  {%- if not is_remote %}
+  <div class="bd-header-announcement__content">{{ theme_announcement }}</div>
+  {%- endif -%}
+</div>
+
+{%- 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
@@ -37,15 +37,15 @@
   <body>
 {%- endblock %}
 {%- block content %}
-    {# Added to support a banner with an alert #}
-    <div class="container-fluid" id="banner"></div>
-
     {% block docs_navbar %}
     <nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top bd-navbar" id="navbar-main">
       {%- include "docs-navbar.html" %}
     </nav>
     {% endblock %}
 
+    {# Added to support a banner with an alert #}
+    {%- include "announcement.html" -%}
+
     <div class="napari-page">
         {% 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
@@ -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
@@ -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) => ({