Remove the custom link styling and add an accent color

assets/css/colors.css

@@ -2,13 +2,17 @@
     --color-background-1: #f4f4f4;
     --color-background-2: #e4e4e4;
     --color-primary-1: #000000;
+    --color-accent: #008891;
+    --color-accent-hover: #539397;
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --color-background-1: #111111;
+        --color-background-1: #171616;
         --color-background-2: #222222;
         --color-primary-1: #eeeeee;
+        --color-accent: #00B7C3;
+        --color-accent-hover: #70c1c6;
     }
 }
 

assets/css/content.css

@@ -1,36 +0,0 @@
-/* Custom classes for styling elements on a page, such as links */
-
-.horizontal-wrapper {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    align-items: flex-start;
-}
-
-.primary-action {
-    background: var(--color-primary-1);
-    padding: 0.8em;
-    color: var(--color-background-1);
-    text-decoration-line: unset;
-    border-radius: 4px;
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--color-primary-1);
-    box-sizing: border-box;
-}
-
-.secondary-action {
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--color-primary-1);
-    padding: 0.8em;
-    text-decoration-line: unset;
-    border-radius: 4px;
-    box-sizing: border-box;
-}
-
-@media screen and (max-width: 768px) {
-    .horizontal-wrapper {
-        flex-direction: column;
-    }
-}

assets/css/global.css

@@ -1,7 +1,6 @@
 @import url('fonts.css');
 @import url('navigation.css');
 @import url('colors.css');
-@import url('content.css');
 @import url('note.css');
 
 html {
@@ -39,7 +38,11 @@ footer {
 }
 
 a {
-    color: unset;
+    color: var(--color-accent);
+}
+
+a:hover {
+    color: var(--color-accent-hover);
 }
 
 /* Improve readability for smaller text, especially in long paragraphs */

assets/css/navigation.css

@@ -12,18 +12,11 @@
 
 .nav-title {
     text-decoration: none;
+    color: unset;
 }
 
-.nav-logo {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    color: var(--color-primary-1);
-}
-
-.nav-logo-icon {
-    height: 48px;
-    width: 48px;
+.nav-title:hover {
+    color: unset;
 }
 
 .nav-menu {
@@ -33,134 +26,3 @@
     padding: 0;
     gap: 32px;
 }
-
-.nav-item {
-    display: flex;
-}
-
-.nav-link {
-    text-decoration: none;
-    color: var(--color-primary-1);
-}
-
-.nav-link:hover {
-    color: #666;
-}
-
-/* Hamburger Menu */
-.hamburger-toggle {
-    display: none;
-}
-
-.hamburger {
-    display: none;
-    flex-direction: column;
-    cursor: pointer;
-    width: 64px;
-    height: 64px;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--color-primary-1);
-    gap: 4px;
-}
-
-.hamburger-line {
-    width: 20px;
-    height: 2px;
-    background-color: var(--color-background-1);
-}
-
-.menu-overlay {
-    position: fixed;
-    top: 80px;
-    left: 0;
-    width: 100%;
-    height: calc(100% - 80px);
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 999;
-    opacity: 0;
-    visibility: hidden;
-    cursor: pointer;
-}
-
-/* Mobile Navigation */
-@media screen and (max-width: 768px) {
-    .hamburger {
-        display: flex;
-    }
-
-    .nav-menu {
-        position: fixed;
-        left: -100%;
-        top: 80px;
-        flex-direction: column;
-        background-color: var(--color-background-1);
-        width: 100%;
-        z-index: 1000;
-        gap: 0;
-    }
-
-    .hamburger-toggle:checked ~ .nav-menu {
-        left: 0;
-    }
-
-    .hamburger-toggle:checked ~ .menu-overlay {
-        opacity: 1;
-        visibility: visible;
-    }
-
-    .nav-menu .nav-link {
-        padding: 16px;
-        width: 100%;
-    }
-}
-
-.project-header {
-    position: relative;
-    display: inline-block;
-    margin-top: 96px;
-}
-
-.project-header h1 {
-    margin-top: 0;
-}
-
-.project-header .breadcrumb-wrapper {
-    position: absolute;
-    left: 0;
-    bottom: 100%;
-    margin-bottom: 0.5rem;
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-}
-
-.project-header .breadcrumb-wrapper a {
-    display: inline-block;
-}
-
-.project-header .breadcrumb-wrapper p {
-    margin: 0;
-    display: inline-block;
-}
-
-.project-footer {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    height: 64px;
-    border-top: 1px solid var(--color-primary-1);
-    border-bottom: 1px solid var(--color-primary-1);
-
-    padding-top: 16px;
-    padding-bottom: 16px;
-    margin-top: 96px;
-}
-
-.project-footer div {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}