feat: show the archive notice on the top page

The other archived sites carry the archive notice on their top page,
while www.neuroinf.jp showed it only on inner pages. Put it where
visitors land, just below the menu and above the site banner.

- add an ArchiveNotice bar with a red accent line and icon on a light
  red background
- share the notice text with NoticeSiteHasBeenArchived so the two
  cannot drift apart

src/common/lib/NoticeSiteHasBeenArchived.tsx

@@ -5,11 +5,12 @@ interface Props {
     lang: MultiLang;
 }
 
+export const ARCHIVED_NOTICE =
+    '[en]This site has been archived since FY2019 and is no longer updated.[/en][ja]このサイトは、2019年度よりアーカイブサイトとして運用されています。[/ja]';
+
 const NoticeSiteHasBeenArchived = (props: Props) => {
     const { lang } = props;
-    const notice =
-        '[en]This site has been archived since FY2019 and is no longer updated.[/en][ja]このサイトは、2019年度よりアーカイブサイトとして運用されています。[/ja]';
-    return <p style={{ color: 'red' }}>{Functions.mlang(notice, lang)}</p>;
+    return <p style={{ color: 'red' }}>{Functions.mlang(ARCHIVED_NOTICE, lang)}</p>;
 };
 
 export default NoticeSiteHasBeenArchived;

src/custom/TopPage.tsx

@@ -3,6 +3,7 @@ import BulletinRecentNews from '../bulletin/blocks/BulletinRecentNews';
 import Config, { type MultiLang } from '../config';
 import Functions from '../functions';
 import imageMainBanner from './assets/images/main-banner.png';
+import ArchiveNotice from './blocks/ArchiveNotice';
 import LinkBannersBlock from './blocks/LinkBannersBlock';
 import RssBlock from './blocks/RssBlock';
 import type { RssFeedSite } from './lib/RssFeed';
@@ -23,6 +24,7 @@ const TopPage = (props: Props) => {
             <Helmet>
                 <title>{title}</title>
             </Helmet>
+            <ArchiveNotice lang={lang} />
             <div>
                 <img src={imageMainBanner} alt="main banner" />
             </div>

src/custom/assets/style.css

@@ -698,4 +698,5 @@ th,
 .bulletin form select,
 .bulletin form input[type="submit"] {
     background-color: #ffffff;
+    color: #000000;
 }

src/custom/blocks/ArchiveNotice.module.css

@@ -0,0 +1,23 @@
+.notice {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 10px 0;
+    padding: 10px 14px;
+    border-left: 5px solid #c62828;
+    background-color: #fdecec;
+    color: #7f1d1d;
+    font-size: 13px;
+    line-height: 1.5;
+}
+
+.icon {
+    flex: none;
+    width: 20px;
+    height: 20px;
+    color: #c62828;
+}
+
+.text {
+    margin: 0;
+}

src/custom/blocks/ArchiveNotice.tsx

@@ -0,0 +1,25 @@
+import { ARCHIVED_NOTICE } from '../../common/lib/NoticeSiteHasBeenArchived';
+import type { MultiLang } from '../../config';
+import Functions from '../../functions';
+import styles from './ArchiveNotice.module.css';
+
+interface Props {
+    lang: MultiLang;
+}
+
+/** The archive notice shown prominently on the top page. */
+const ArchiveNotice = (props: Props) => {
+    const { lang } = props;
+    return (
+        <div className={styles.notice} role="note">
+            <svg className={styles.icon} viewBox="0 0 20 20" aria-hidden="true">
+                <circle cx="10" cy="10" r="9" fill="none" stroke="currentColor" strokeWidth="2" />
+                <rect x="9" y="8.5" width="2" height="6" fill="currentColor" />
+                <rect x="9" y="5" width="2" height="2" fill="currentColor" />
+            </svg>
+            <p className={styles.text}>{Functions.mlang(ARCHIVED_NOTICE, lang)}</p>
+        </div>
+    );
+};
+
+export default ArchiveNotice;

src/xoonips/Xoonips.module.css

@@ -85,4 +85,5 @@
 .database :global(.fieldDate input),
 .database :global(.listTable select) {
     background-color: #ffffff;
+    color: #000000;
 }

src/xoonips/blocks/IndexTree.module.css

@@ -18,6 +18,7 @@
     margin: 3px 3px 10px;
     /* sanitize.css forms.css leaves buttons transparent */
     background-color: #ffffff;
+    color: #000000;
 }
 
 .indexTree div span {
@@ -43,26 +44,37 @@
     display: inline-block;
     height: 20px;
     width: 9px;
-    background: url(../assets/images/tree_line.png);
+    background: url(../assets/images/tree_line.png) no-repeat -18px 0;
 }
-.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:not(:last-child)) {
+/* treeData has a single root, so the first indent unit never carries a line. */
+.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:first-child) {
+    display: none;
+}
+.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:not(.rc-tree-indent-unit-end)) {
     background-position: -9px 0;
 }
-.indexTree:global(
-    .rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:not(:last-child).rc-tree-indent-unit-end
-) {
-    background-position: -18px 0;
+/* The node's own branch (├ or └) is drawn after the indent units. */
+.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent)::after {
+    content: "";
+    display: inline-block;
+    vertical-align: bottom;
+    height: 20px;
+    width: 9px;
+    background: url(../assets/images/tree_line.png) no-repeat 0 0;
 }
-.indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-indent .rc-tree-indent-unit:last-child.rc-tree-indent-unit-end) {
+.indexTree:global(.rc-tree .rc-tree-treenode.rc-tree-treenode-leaf-last .rc-tree-indent)::after {
     background-position: -27px 0;
 }
+.indexTree:global(.rc-tree .rc-tree-treenode:first-child .rc-tree-indent)::after {
+    display: none;
+}
 
 .indexTree:global(.rc-tree .rc-tree-treenode .rc-tree-switcher) {
     display: inline-block;
     height: 20px;
     width: 16px;
     margin-right: 2px;
-    background: url(../assets/images/tree_node.png);
+    background: url(../assets/images/tree_node.png) no-repeat;
     cursor: pointer;
 }
 .indexTree:global(.rc-tree .rc-tree-treenode:first-child .rc-tree-switcher.rc-tree-switcher-noop) {