deploy: a4cb40b

404.html

@@ -201,6 +201,7 @@
 
 
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+
 
         <title> Page Not Found |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -252,6 +253,8 @@ <h1 class="heading--main">Page Not Found</h1>
 
 <content-wrapper>
 
+
+
     <div class="prose">
         <p>Sorry! Either the page you are looking for does not exist, or it has been moved to a diffrent part of this website.</p>
 

about/index.html

@@ -200,6 +200,7 @@
 
 
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+
 
         <title> About |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -258,12 +259,16 @@ <h1 class="heading--main">About</h1>
 
 <content-wrapper>
 
+
+
     <article class="prose">
         <p>Hi, I am Helen Chong (they/she) from Malaysia. I am a front-end web developer with 8 years of working experience as a graphic designer.</p>
 <p>I love to build and create things for problem-solving and self-expression. I intend to transfer my graphic design experience into web design and web development expertise, using code and build sites and apps to solve problems. I have a particular interest on responsive, accessible, inclusive and scalable design to create the best user experience.</p>
 <p>In addition to coding and programming, I enjoy gaming, reading, drawing and crocheting.</p>
 <p>You can <a href="https://helenchong.dev/resume">check out my resume</a>.</p>
-<h2>My Certificates:</h2>
+<div class="heading-wrapper h2">
+<h2 id="my-certificates">My Certificates:</h2>
+<a class="heading-anchor" href="#my-certificates" aria-labelledby="my-certificates"><span hidden="">#</span></a></div>
 <ul>
 <li>freeCodeCamp's <a href="https://www.freecodecamp.org/certification/helenclx/responsive-web-design">Responsive Web Design Certification</a></li>
 <li>freeCodeCamp's <a href="https://www.freecodecamp.org/certification/helenclx/javascript-algorithms-and-data-structures-v8">JavaScript Algorithms and Data Structures (Beta) Certification</a></li>

accessibility/index.html

@@ -203,6 +203,7 @@
 
 
         <script src="/assets/js/GrBw0q69KL.js" defer=""></script>
+
 
         <title> Accessibility |  Helen Chong | Front-End Web Developer</title>
     </head>
@@ -254,6 +255,8 @@ <h1 class="heading--main">Accessibility</h1>
 
 <content-wrapper>
 
+
+
     <div class="prose">
 
 <p>I take accessibility seriously. I want every visitor to my website to have the best possible experience of browsing my website. Therefore, I strive to design this website to be accessible, including to disabled and neurodivergent people, by aiming to meet <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) 2.2 Level AA standards</a>.</p>

assets/css/content.css

@@ -13,7 +13,11 @@ content-wrapper { gap: 1rem; }
 }
 
 .prose > * + :not([class]) { margin-top: var(--sz-paragraph-margin); }
-.prose * + h2, .prose h3, .prose h4, .prose h5, .prose h6 { margin-top: 2em; }
+
+.prose > * + h2, .prose > * + .h2,
+.prose > h3,  .prose > * + .h3,
+.prose > h4, .prose > h5, .prose > h6 { margin-top: 2em; }
+
 .bio { max-width: 65ch; }
 .right-sidebar { padding: 0 clamp(1em, 5%, 1.5em) 3em; }
 
@@ -22,6 +26,27 @@ content-wrapper { gap: 1rem; }
     top: 6em;
 }
 
+/* Heading Wrapper and Anchor */
+.heading-wrapper {
+    display: flex;
+    gap: 0.3em;
+    align-items: baseline;
+}
+
+* + .heading-wrapper { margin-top: 1.8em; }
+
+.heading-anchor {
+    order: -1;
+    text-underline-offset: 0.1em;
+}
+
+.heading-anchor:focus {
+    outline: 0.13em solid currentColor;
+    outline-offset: 0.05em;
+}
+
+.heading-anchor [hidden] { display: block; }
+
 /* Desktop main content layout */
 @media only screen and (min-width: 60rem) {
     content-wrapper {
@@ -32,4 +57,4 @@ content-wrapper { gap: 1rem; }
     .prose { grid-area: article; }
     .left-sidebar { grid-area: leftbar; }
     .right-sidebar { grid-area: rightbar; }
-}
+}

assets/css/general.css

@@ -20,15 +20,22 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 { font-size: var(--fs-h1); }
-h2 { font-size: var(--fs-h2); }
-h3 { font-size: var(--fs-h3); }
+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; }
+
 img, picture { height: auto; }
+:focus { outline: 0.15em solid currentColor; }
 
-code { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; }
-:not(pre) > code { padding: 0.125em 0.25em; }
+code {
+    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+    word-break: break-word;
+}
 
+:not(pre) > code { padding: 0.125em 0.25em; }
 :not(pre) > code,
 pre { background-color: var(--clr-code-bg); }
 
@@ -79,4 +86,6 @@ ul:not([class]), ol:not([class]) {
 ul:not([class]) ul, ol:not([class]) ol,
 ul:not([class]) ol, ol:not([class]) ul { margin-top: var(--sz-list-gap); }
 
-button:hover { cursor: pointer; }
+button:hover { cursor: pointer; }
+details:focus { outline-offset: 0.2em; }
+summary { cursor: pointer; }