deploy: e19f00d

helenclx · Jun 6, 2024 · 7ce46df · 7ce46df
1 parent 0962494
commit 7ce46df
Show file tree

Hide file tree

Showing 55 changed files with 617 additions and 1,170 deletions.
diff --git a/about/index.html b/about/index.html
@@ -232,6 +232,11 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 
 <header class="main__header">
 
+    <ul class="breadcrumbs">
+
+    </ul>
+
+
 
     <h1 class="heading--main">About</h1>
 
@@ -240,8 +245,8 @@ <h1 class="heading--main">About</h1>
 
 <div class="container">
 
-		<div class="prose">
-			<p>Hi, I am Helen Chong (they/she). I am a front-end web developer with 8 years of working experience as a graphic designer. I specialise in front-end web development.</p>
+    <article class="prose">
+        <p>Hi, I am Helen Chong (they/she). I am a front-end web developer with 8 years of working experience as a graphic designer. I specialise in front-end web development.</p>
 <p>I intend to transfer my graphic design experience into web design and web development expertise, as I love to 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>
 <h2>My Certificates:</h2>
 <ul>
@@ -252,28 +257,13 @@ <h2>My Certificates:</h2>
 <li><a href="https://cs50.harvard.edu/certificates/8cb0f5a4-4107-4df6-8abc-cfab3a437367">CS50’s Introduction to Computer Science 2024</a> certificate (PDF file)</li>
 </ul>
 
-		</div>
-
+
+
+    </article>
 
 
 </div>
 
-<style>
-    .breadcrumbs {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: 0.5em;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-
-    .breadcrumbs li::after {
-        content: '➔';
-        padding-left: 0.3em;
-    }
-</style>
         </main>
         <footer class="footer container">
     <nav class="socials">

diff --git a/accessibility/index.html b/accessibility/index.html
@@ -236,15 +236,16 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
 
 
+
     <h1 class="heading--main">Accessibility</h1>
 
 
 </header>
 
 <div class="container">
 
-		<div class="prose">
-			
+    <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>
 <p>I use the following tools to test my site for accessibility:</p>
 <ul>
@@ -256,28 +257,13 @@ <h1 class="heading--main">Accessibility</h1>
 
 
 <p>(This accessibility statement was last updated on 28 May 2024)</p>
-		</div>
-
+
+
+    </div>
 
 
 </div>
 
-<style>
-    .breadcrumbs {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: 0.5em;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-
-    .breadcrumbs li::after {
-        content: '➔';
-        padding-left: 0.3em;
-    }
-</style>
         </main>
         <footer class="footer container">
     <nav class="socials">

diff --git a/assets/css/blog.css b/assets/css/blog.css
@@ -15,6 +15,7 @@
 
 .blog__post--info {
     gap: 0.3em;
+    font-size: var(--sz-home-txt);
     margin-bottom: 2em;
 }
 

diff --git a/assets/css/components.css b/assets/css/components.css
@@ -130,3 +130,20 @@
     color: var(--clr-slate-600);
     text-align: center;
 }
+
+/* Breadcumbs */
+.breadcrumbs {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    gap: 0.5em;
+    flex-wrap: wrap;
+    justify-content: center;
+    font-size: var(--sz-home-txt);
+}
+
+.breadcrumbs li::after {
+    content: '➔';
+    padding-left: 0.3em;
+}
diff --git a/assets/css/content.css b/assets/css/content.css
@@ -46,12 +46,12 @@ main {
 }
 
 .right-sidebar {
-    padding: 1.2em clamp(1em, 5%, 1.5em);
+    padding: 0 clamp(1em, 5%, 1.5em);
 }
 
 .sidebar--sticky {
     position: sticky;
-    top: 6.5em;
+    top: 7em;
 }
 
 /* Desktop main content layout */

diff --git a/assets/css/general.css b/assets/css/general.css
@@ -31,11 +31,6 @@ h3 {
     font-size: var(--sz-h3);
 }
 
-h2:has(+ *[class]),
-h3:has(+ *[class]) {
-    margin-bottom: 0.5em;
-}
-
 h4 {
     font-size: var(--sz-h4);
 }

diff --git a/assets/css/projects.css b/assets/css/projects.css
@@ -121,8 +121,13 @@
     margin: 0 auto 4rem auto;
 }
 
+.project--page {
+    display: grid;
+    place-content: center;
+}
+
 .project {
-    margin-bottom: 4rem;
+    max-width: 60rem;
 }
 
 .project__image-wrapper {

diff --git a/assets/css/socials.css b/assets/css/socials.css
@@ -24,6 +24,6 @@
 }
 
 .socials__icon {
-    font-size: 2rem;
+    font-size: 1.8rem;
     color: var(--clr-accent-700);
 }
diff --git a/blog/categories/100-days-of-code/index.html b/blog/categories/100-days-of-code/index.html
@@ -233,15 +233,16 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
 
 
+
     <h1 class="heading--main">Blog Post Category: &quot;100 days of code&quot;</h1>
 
 
 </header>
 
 <div class="container">
 
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">1 Posts Filed Under "100 days of code"</h2>
 
 
@@ -261,8 +262,9 @@ <h2 class="heading--main">1 Posts Filed Under "100 days of code"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-
+
+
+    </div>
 
 
 
@@ -290,22 +292,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
 
 </div>
 
-<style>
-    .breadcrumbs {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: 0.5em;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-
-    .breadcrumbs li::after {
-        content: '➔';
-        padding-left: 0.3em;
-    }
-</style>
         </main>
         <footer class="footer container">
     <nav class="socials">

diff --git a/blog/categories/about-this-blog/index.html b/blog/categories/about-this-blog/index.html
@@ -233,15 +233,16 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
 
 
+
     <h1 class="heading--main">Blog Post Category: &quot;about this blog&quot;</h1>
 
 
 </header>
 
 <div class="container">
 
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">2 Posts Filed Under "about this blog"</h2>
 
 
@@ -271,8 +272,9 @@ <h2 class="heading--main">2 Posts Filed Under "about this blog"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-
+
+
+    </div>
 
 
 
@@ -300,22 +302,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
 
 </div>
 
-<style>
-    .breadcrumbs {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: 0.5em;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-
-    .breadcrumbs li::after {
-        content: '➔';
-        padding-left: 0.3em;
-    }
-</style>
         </main>
         <footer class="footer container">
     <nav class="socials">

diff --git a/blog/categories/about-this-website/index.html b/blog/categories/about-this-website/index.html
@@ -233,15 +233,16 @@ <h2 class="visually-hidden">Navigation Links:</h2>
 <header class="main__header">
 
 
+
     <h1 class="heading--main">Blog Post Category: &quot;about this website&quot;</h1>
 
 
 </header>
 
 <div class="container">
 
-		<div class="prose">
-			
+    <div class="prose">
+        
 <h2 class="heading--main">3 Posts Filed Under "about this website"</h2>
 
 
@@ -281,8 +282,9 @@ <h2 class="heading--main">3 Posts Filed Under "about this website"</h2>
 
 <p>See <a href="/blog/categories/">all blog post categories</a>.</p>
 
-		</div>
-
+
+
+    </div>
 
 
 
@@ -310,22 +312,6 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
 
 </div>
 
-<style>
-    .breadcrumbs {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: 0.5em;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-
-    .breadcrumbs li::after {
-        content: '➔';
-        padding-left: 0.3em;
-    }
-</style>
         </main>
         <footer class="footer container">
     <nav class="socials">