Fixed anchor styling and dark mode

Author: beachatel

index.html

@@ -79,11 +79,11 @@
           Superformula Subdivision
         </figcaption>
 
-        <figcaption class="tag">
 
-          <a class="tag" href="ArtDesign.html">
-            Art / Design
-          </a>
+
+        <a class="tag" href="ArtDesign.html">
+          Art / Design
+        </a>
         </figcaption>
 
       </a>
@@ -103,10 +103,10 @@
           Balance NCL Motion Graphics
         </figcaption>
 
-        <figcaption class="tag">
-          <a class="tag" href="ArtDesign.html">
-            Art/Design
-          </a>
+
+        <a class="tag" href="ArtDesign.html">
+          Art/Design
+        </a>
         </figcaption>
 
       </a>
@@ -135,10 +135,10 @@
           John Glacier - Like A Ribbon Animation
         </figcaption>
 
-        <figcaption class="tag">
-          <a class="tag" href="archive.html?tag=Ambient">
-            Art / Design
-          </a>
+
+        <a class="tag" href="archive.html?tag=Ambient">
+          Art / Design
+        </a>
         </figcaption>
 
       </a>
@@ -160,10 +160,10 @@
           Interactive Ascii Animation
         </figcaption>
 
-        <figcaption class="tag">
-          <a class="tag" href="archive.html?tag=Ambient">
-            Art / Design
-          </a>
+
+        <a class="tag" href="archive.html?tag=Ambient">
+          Art / Design
+        </a>
         </figcaption>
 
       </a>
@@ -185,10 +185,10 @@
           SHOPAYADO Poster
         </figcaption>
 
-        <figcaption class="tag">
-          <a class="tag" href="archive.html?tag=Ambient">
-            Art / Design
-          </a>
+
+        <a class="tag" href="archive.html?tag=Ambient">
+          Art / Design
+        </a>
         </figcaption>
 
       </a>
@@ -216,11 +216,11 @@
           Lyon Illustration Animation
         </figcaption>
 
-        <figcaption class="tag">
 
-          <a class="tag" href="ArtDesign.html">
-            Art / Design
-          </a>
+
+        <a class="tag" href="ArtDesign.html">
+          Art / Design
+        </a>
         </figcaption>
 
       </a>
@@ -237,11 +237,11 @@
           Jupiter Disco Animated Poster Concepts
         </figcaption>
 
-        <figcaption class="tag">
 
-          <a class="tag" href="ArtDesign.html">
-            Art / Design
-          </a>
+
+        <a class="tag" href="ArtDesign.html">
+          Art / Design
+        </a>
         </figcaption>
 
       </a>
@@ -258,11 +258,11 @@
           Interactive Gradient Visualiser
         </figcaption>
 
-        <figcaption class="tag">
 
-          <a class="tag" href="ArtDesign.html">
-            Art / Design
-          </a>
+
+        <a class="tag" href="ArtDesign.html">
+          Art / Design
+        </a>
         </figcaption>
 
       </a>
@@ -282,12 +282,7 @@
           Ian Pooley: Interstellar Strut Visualiser
         </figcaption>
 
-        <figcaption class="tag">
 
-          <a class="tag" href="ArtDesign.html">
-            Art / Design
-          </a>
-        </figcaption>
 
       </a>
 
@@ -304,11 +299,11 @@
           40Mustaqel Motion Graphic
         </figcaption>
 
-        <figcaption class="tag">
 
-          <a class="tag" href="ArtDesign.html">
-            Art / Design
-          </a>
+
+        <a class="tag" href="ArtDesign.html">
+          Art / Design
+        </a>
         </figcaption>
 
       </a>
@@ -328,11 +323,11 @@
           Baalti Concept Visualiser
         </figcaption>
 
-        <figcaption class="tag">
 
-          <a class="tag" href="ArtDesign.html">
-            Art / Design
-          </a>
+
+        <a class="tag" href="ArtDesign.html">
+          Art / Design
+        </a>
         </figcaption>
 
       </a>

main.css

@@ -53,6 +53,54 @@
     color: white;
 }
 
+/* Dark Mode Styles */
+body.dark-mode {
+    background-color: black;
+    color: white;
+}
+
+body.dark-mode #header {
+    border-color: white;
+}
+
+body.dark-mode .indexTitle,
+body.dark-mode .links,
+body.dark-mode .socials,
+body.dark-mode figcaption.projectName,
+body.dark-mode figcaption.tag {
+    color: white;
+}
+
+body.dark-mode .socials {
+    border-top-color: white;
+}
+
+body.dark-mode .socials svg {
+    fill: white;
+    color: white;
+}
+
+body.dark-mode #darkModeToggle {
+    border: 2px solid white;
+    color: white;
+}
+
+body.dark-mode #darkModeToggle:hover {
+    background-color: white;
+    color: black;
+}
+
+body.dark-mode a {
+    color: white !important;
+}
+
+body.dark-mode a:hover,
+body.dark-mode a:active,
+body.dark-mode a:visited {
+    color: white !important;
+    text-decoration: underline solid white;
+}
+
 /* Masonry Grid Layout */
 .img-grid-archive {
     column-count: 3;
@@ -73,6 +121,7 @@ img.projectImg {
     display: block;
     border-radius: 0.25em;
     object-fit: cover;
+    padding-top: 1em;
 }
 
 figcaption {
@@ -139,4 +188,4 @@ a:visited {
     .img-grid-archive {
         column-count: 1;
     }
-}
+}