add announcement bar and show archived notice in announcement bar

.gitignore

@@ -5,3 +5,4 @@
 /resources/
 public/
 assets/jsconfig.json
+.vercel

assets/scss/template.scss

@@ -14,3 +14,11 @@
 .home-hero .bg-image {
   background-repeat: repeat;
 }
+
+// for header announcementBar
+.announcement_bar {
+  --site-announcement-bar-stripe-color1: hsl(167 68% 85%);
+  --site-announcement-bar-stripe-color2: hsl(167 68% 95%);
+  background: repeating-linear-gradient(35deg,var(--site-announcement-bar-stripe-color1),var(--site-announcement-bar-stripe-color1) 20px,var(--site-announcement-bar-stripe-color2) 10px,var(--site-announcement-bar-stripe-color2) 40px);
+  font-weight: 700;
+}

layouts/partials/hooks/head-start/announcement-bar.html

@@ -0,0 +1,11 @@
+<div class="announcement_bar"
+    style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80px;">
+    <div style="text-align: center; color: rgb(198, 16, 95);">
+        <b>We moved to a <a href="https://hpcde.hpcer.dev">New Site</a>.
+            This site will NOT UPDATE any more.
+        </b>
+    </div>
+    <div style="text-align: center; color: rgb(198, 16, 95);">
+        <b>Please visit <a href="https://hpcde.hpcer.dev">https://hpcde.hpcer.dev</a> for latest news.</b>
+    </div>
+</div>