Rename Upcoming section to Notice section

src/_includes/main/notice.njk

@@ -0,0 +1,26 @@
+<section class="section--home grid-center">
+    <h2 class="heading--home">Notice</h2>
+    <div class="notice">
+        <h3 class="notice__heading">I Am Open for Hire</h3>
+        <p>I am available for new work opportunities and looking for a remote web developer position.</p>
+        <p>If you would like to get in touch, please <a href="/contact">contact me</a> or check out <a href="/resume">my résumé</a>.</p>
+    </div>
+</section>
+
+{%- css %}
+.notice {
+    border: 0.2em solid var(--clr-accent-700);
+    background-color: var(--clr-accent-100);
+    padding: 1em;
+    max-width: 45rem;
+    display: grid;
+    gap: 1em;
+}
+
+.notice__heading { text-align: center; }
+.notice-list { padding: 0; }
+.notice-list__item {
+    display: grid;
+    gap: 0.3em;
+}
+{% endcss %}

src/assets/css/global.css

@@ -9,7 +9,7 @@
 
     --clr-slate-300: light-dark(#5d5d5d, #f8f8f8);
     --clr-slate-600: light-dark(#383838, #f6f6f6);
-    --clr-accent-100: light-dark(#edcfff, #4c004c);
+    --clr-accent-100: light-dark(#f1d9ff, #4c004c);
     --clr-accent-600: light-dark(#a200ff, #da85ff);
     --clr-accent-700: light-dark(#8200cd, #cb7aff);
     --clr-accent-800: light-dark(#5a008e, #d09dff);

src/index.njk

@@ -8,7 +8,7 @@ metadata:
 <h1 class="visually-hidden">Home Page</h1>
 <div class="home--container">
     {% include "main/profile.njk" %}
-    {# {% include "main/upcoming.njk" %} #}
+    {# {% include "main/notice.njk" %} #}
     {% include "main/blog-section.njk" %}
     {% include "main/project-grid.njk" %}
     {% include "main/web-membership.njk" %}