Implement pre-header from new research.csc.fi (#2450)

* Remove outdated accessibility fixes

* Remove outdated customization

* Implement pre-header

* Move icon svg to stylesheet

* Improve responsiveness

* Update announcement.html

* Update instructions

Fix icon uncommenting

* Relative icon size

* Update announcement.html

* Adjust icon margins

* Adjust header box-shadow

* Update pre-header.html

---------

Co-authored-by: Rasmus Kronberg <43936697+rkronberg@users.noreply.github.com>

FAQ.md

@@ -329,11 +329,27 @@ The glossary is also viewable as a page at [docs.csc.fi/glossary](https://docs.c
 
 ## How do I use the announcement bar?
 
-The content inside the yellow announcement bar at the top of the page is controlled by editing the file
+The content inside the yellow announcement bar below the header is controlled by editing the file
 [csc-overrides/partials/announcement.html](csc-overrides/partials/announcement.html). The bar's
 visibility, in turn, is controlled by changing the value `true|false` of `extra: announcement_visible` in
 [mkdocs.yml](mkdocs.yml). At the moment, the only content confirmed to work are HTML `<p>` and `<a>`.
 
+Select an icon by uncommenting (change both `#`s to `%`s) one of the lines:
+
+Commented:
+```text
+{# import ".icons/material/information.svg" as icon #}
+```
+
+Uncommented:
+```text
+{% import ".icons/material/information.svg" as icon %}
+```
+
+Make sure to "un-uncomment" every other line, since only a single line may be in an uncommented state at a time.
+
+Documentation for _Material for MkDocs_ has a [search feature](https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/?h=icon#search) including **previews** for the icon database. The path of the icon file can be determined by examining the shortcode. For example, the path `.icons/material/information.svg` above corresponds to the shortcode `:material-information:` shown in the search.
+
 ## How do I add a license tag to an application page?
 
 The license tag is added inside a YAML front matter. The first lines in the Markdown file should be

csc-overrides/assets/javascripts/extra.js

@@ -1,31 +1,3 @@
-// This enables opening main navigation tabs with enter key
-var nav_links = document.getElementsByClassName("md-nav__link");
-var openNavIfEnterClicked = function (event) {
-  var keyCode = event.which || event.keyCode;
-  if (keyCode === 13) {
-    event.preventDefault();
-    event.target.click();
-  }
-};
-
-for (var i = 0; i < nav_links.length; i++) {
-  nav_links[i].addEventListener("keyup", openNavIfEnterClicked, false);
-
-  // Fix tab key navigation skipping items with nested items
-  nav_links[i].setAttribute("tabindex", "0");
-}
-
-// With Safari/IE browser, tab key navigation gets stuck at search, this is hack to prevent it
-var search_bar = document.getElementsByClassName("md-search__input");
-var moveFocusFromSearch = function (event) {
-  var keyCode = event.which || event.keyCode;
-  if (keyCode === 9) {
-    var dropdown = document.querySelector('nav.csc-dropdown.csc-dropdown--header');
-    dropdown.focus();
-  }
-};
-search_bar[0].addEventListener("keyup", moveFocusFromSearch, false);
-
 // Disable shortcut key s for search as it messes with assistive technology apparently
 document.onkeydown = function (event) {
   if (event.key == "s" && !document.activeElement.classList.contains('md-search__input')) {

csc-overrides/assets/stylesheets/announcement.css

@@ -1,17 +1,30 @@
-.md-banner {
+.announcement-banner {
+  height: 4em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background-color: var(--csc-admonition--bg);
+  color: var(--csc-admonition--fg);
+  font-size: 1.25em;
 }
 
-.md-banner__inner {
-  overflow: hidden;
-  max-width: unset;
-  height: auto;
-  margin: .3rem auto;
+.announcement-banner a {
+  text-decoration: underline;
+  transition: background-color 125ms;
+  color: var(--md-typeset-a-color);
 }
 
-.md-banner__inner p {
-  margin: unset;
-  font-size: small;
-  color: var(--csc-admonition--fg);
-  line-height: 2.0;
+.announcement-banner a:hover {
+  background-color: var(--md-accent-bg-color);
+}
+
+.announcement-banner > .announcement-icon {
+  margin: 0 1.125em;
+  height: 1.75em;
+  aspect-ratio: 1/1;
+  fill: var(--csc-admonition--fg);
+}
+
+.announcement-banner > .announcement-icon-end {
+  transform: rotateY(180deg);
 }

csc-overrides/assets/stylesheets/content.css

@@ -1,5 +1,5 @@
 main > .md-main__inner.md-grid {
-  margin-top: 1rem;
+  margin-top: unset;
   max-width: var(--csc-content-width);
 }
 

csc-overrides/assets/stylesheets/extra.css

@@ -5,9 +5,9 @@
 @import url(./announcement.css);
 @import url(./breadcrumbs.css);
 @import url(./content.css);
-@import url(./dropdown.css);
 @import url(./feedback.css);
 @import url(./footer.css);
+@import url(./pre-header.css);
 @import url(./header.css);
 @import url(./landing.css);
 @import url(./sidebars.css);

csc-overrides/assets/stylesheets/header.css

@@ -5,7 +5,7 @@
 }
 
 .md-header__inner {
-  max-width: unset;
+  max-width: var(--csc-content-width);
   height: var(--csc-header-height);
 }