Restyle header and home page

src/_includes/global/header.njk

@@ -17,7 +17,9 @@
 
 <header class="header">
     <h2 class="header__title">
-        <a {% if currentUrl === '/' %}aria-current="page"{% endif %} href="/">Helen Chong</a>
+        <a {% if currentUrl === '/' %}aria-current="page"{% endif %} href="/">
+            <img class="header__logo" src="/assets/favicon/HC-favicon.svg" alt="Helen Chong initials logo">
+        </a>
     </h2>
     <nav aria-labelledby="top-nav-title">
         <h3 class="visually-hidden" id="top-nav-title">Main</h3>
@@ -54,6 +56,11 @@
         margin: 0;
     }
 
+    .header__logo {
+        aspect-ratio: 1 / 1;
+        height: 1.3em;
+    }
+
     .header__title a:focus,
     .header__toggle:focus {
         outline: 0.12em solid var(--clr-accent-600);
@@ -141,7 +148,7 @@
         .header__title { margin-bottom: 0; }
     }
 
-    @media only screen and (min-width: 705px) {
+    @media only screen and (min-width: 530px) {
         .header { position: sticky; }
         .header__navmenu { margin: 0; }
         .header__toggle, .header__popover { display: none; }

src/_includes/main/profile.njk

@@ -1,11 +1,9 @@
 <section class="profile">
-    <h2 class="visually-hidden">Introduction</h2>
     <div class="profile__image-wrapper">
         <img fetchpriority="high" src="/assets/images/profile/avatar-helen-chong.avif" alt="Avatar of Helen Chong">
     </div>
     <div class="profile__card">
-        <p class="profile__text">Hi! I am <span class="profile__text--highlight">Helen</span>, a graphic designer turned web developer from Malaysia.</p>
-        <p class="profile__text">As a <span class="profile__text--highlight">Web Developer</span>, I love building the web to solve problems and express myself.</p>
+        <p class="profile__text">Hi! I am <span class="profile__text--highlight">Helen</span>, a graphic designer turned web developer from Malaysia. As a <span class="profile__text--highlight">Web Developer</span>, I love building the web to solve problems and express myself.</p>
         <p class="profile__text">I focus on accessibility, inclusive design and progressive enhancement to create a user experience that puts people first. You can <a class="profile__link" href="/about">learn more about me</a> and check out <a class="profile__link" href="{{sitemeta.siteUrl}}/resume">my résumé</a> for my professional history.</p>
         <p class="profile__text">I am always open to connect with more people, so do not hesitate to <a class="profile__link" href="/contact">get in touch with me</a>.<p>
     </div>

src/_includes/main/project-grid.njk

@@ -5,5 +5,5 @@
             {% include "main/project-card.njk" %}
         {% endeach %}
     </div>
-    <a class="home__btn-link el-top-margin" href="/projects">More Projects</a>
+    <a class="home__btn-link" href="/projects">More Projects</a>
 </section>

src/assets/css/general.css

@@ -21,9 +21,6 @@ h2, .h2 { font-size: var(--fs-h2); }
 h3, .h3 { font-size: var(--fs-h3); }
 h4 { font-size: var(--fs-h4); }
 
-h2:has(+ *[class]:not(.heading-anchor)), .h2:has(+ *[class]),
-h3:has(+ *[class]:not(.heading-anchor)), .h3:has(+ *[class]) { margin-bottom: 0.5em; }
-
 :focus { outline: 0.15em solid currentColor; }
 
 a { color: var(--clr-accent-700); }

src/assets/css/global.css

@@ -90,4 +90,8 @@
     :target {
         scroll-margin-block: 5ex;
     }
+
+    [popover] {
+        margin: auto;
+    }
 }

src/assets/css/home.css

@@ -19,8 +19,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 2.5em;
-    margin: 3em 0;
+    gap: 2em;
+    margin-bottom: 3em;
     padding: 0 1em;
 }
 
@@ -73,16 +73,22 @@
 }
 
 /* Home headings */
+.home__title {
+    text-align: center;
+    margin-top: 1em;
+    margin-bottom: 0.7em;
+    padding: 0 1em;
+}
+
 .heading--home {
-    margin-bottom: 2rem;
-    font-size: 2.5rem;
+    margin-bottom: 0.8em;
     text-align: center;
 }
 
 /* Home button links */
 .home__btn-link {
     display: block;
-    margin: 0 auto;
+    margin: 1.3em auto 0;
     border: 0.15em solid currentColor;
     text-decoration: none;
     padding: 0.5em 1em;

src/index.njk

@@ -5,7 +5,7 @@ metadata:
     desc: Helen Chong's developer portfolio and blog.
 ---
 
-<h1 class="visually-hidden">Home Page</h1>
+<h1 class="home__title">Helen Chong, Web Developer</h1>
 <div class="home--container">
     {% include "main/profile.njk" %}
     {# {% include "main/notice.njk" %} #}