added more comments

hugh5 · May 21, 2024 · 8357d94 · 8357d94
1 parent 9ad003e
commit 8357d94
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 157 deletions.
diff --git a/blog.html b/blog.html
@@ -28,6 +28,7 @@
         <main>
             <div id="blog">
                 <div class="column">
+                    <!-- Blog Post 1 -->
                     <article>
                         <div class="row">
                             <img
@@ -129,6 +130,7 @@ <h2>
                             </p>
                         </div>
                     </article>
+                    <!-- Blog Post 2 -->
                     <article>
                         <div class="row">
                             <img

diff --git a/css/style.css b/css/style.css
@@ -4,32 +4,27 @@
 /* General Styles */
 :root {
 
-    --background-color: #808080;
-
     /* Light/Dark mode implementated using CSS variables and a data attribute */
     /* Dark theme */
-    body[data-theme="dark"] {
+    &[data-theme="dark"] {
         --accent-color: #9B70ff;
         --background-color: #141414;
         --secondary-background-color: #525252;
         --secondary-background-color-rgb: 82, 82, 82;
         --tertiary-background-color: #272727;
         --primary-text-color: #fff;
         --secondary-text-color: #ccc;
-        transition: background-color 0.5s;
     }
 
     /* Light theme */
-    body[data-theme="light"] {
+    &[data-theme="light"] {
         --accent-color: #ff9900;
         --background-color: #ececec;
         --secondary-background-color: #fff;
         --secondary-background-color-rgb: 255, 255, 255;
         --tertiary-background-color: #f5f5f5;
         --primary-text-color: #000;
         --secondary-text-color: #666;
-        transition: background-color 0.5s;
-
 
         /* Invert image colours for light theme */
         .theme-icon {
@@ -60,6 +55,7 @@ html, body {
     padding: 0;
     background-color: var(--background-color);
     overflow-wrap: anywhere;
+    transition: background-color 0.5s, color 0.5s; /* Smooth transition effect */
 }
 
 body {
@@ -370,6 +366,7 @@ section {
 
 .helloimage {
     border-radius: 50%;
+    border: 2px solid var(--accent-color);
     width: 200px;
     height: 200px;
     object-fit: cover; /* Cover the entire container */

diff --git a/experience.html b/experience.html
@@ -28,6 +28,7 @@
         <main>
             <div id="experience">
                 <div class="column">
+                    <!-- Education Section -->
                     <section>
                         <h2>Education</h2>
                         <div class="row">
@@ -61,6 +62,7 @@ <h5>2021 — Present</h5>
                             <span>networking</span>.
                         </p>
                     </section>
+                    <!-- Experience Section -->
                     <section>
                         <h2>Experience</h2>
                         <div class="row">
@@ -121,6 +123,7 @@ <h5>Jul 2023 — Present</h5>
                             </li>
                         </ul>
                     </section>
+                    <!-- Skills Section -->
                     <section>
                         <h2>Skills</h2>
                         <h4>Programming Languages</h4>

diff --git a/js/script.js b/js/script.js
@@ -3,7 +3,7 @@
  */
 function setLightMode() {
     // Set the theme attribute to light
-    $("body").attr("data-theme", "light");
+    $(":root").attr("data-theme", "light");
     // Change the theme icon to the light theme icon
     $(".theme-icon").attr("src", "images/light-theme.png");
     // Save the theme to local storage
@@ -15,7 +15,7 @@ function setLightMode() {
  */
 function setDarkMode() {
     // Set the theme attribute to dark
-    $("body").attr("data-theme", "dark");
+    $(":root").attr("data-theme", "dark");
     // Change the theme icon to the dark theme icon
     $(".theme-icon").attr("src", "images/dark-theme.png");
     // Save the theme to local storage
@@ -234,6 +234,7 @@ let counter = {};
 // Holds the maximum index for each project
 let counts = {};
 
+// Runs once the DOM is ready
 $(function () {
     loadThemeToggle();
     loadNav();