Remove the custom link styling and add an accent color

_notes/cmes-mobile.md

@@ -12,8 +12,8 @@ The app's front-end uses Capacitor and Angular, with several Capacitor plugins i
 
 This app is actively used in medical facilities in Uganda and Nepal, to name a few.
 
-[App Store](https://apps.apple.com/us/app/cmes/id1276335909){: .primary-action }
+- [App Store](https://apps.apple.com/us/app/cmes/id1276335909)
-[Google Play](https://play.google.com/store/apps/details?id=org.cmesworld.www.cmes_piandroid_app){: .primary-action }
+- [Google Play](https://play.google.com/store/apps/details?id=org.cmesworld.www.cmes_piandroid_app)
-[Techies Without Borders](https://techieswithoutborders.us/){: .secondary-action }
+- [Techies Without Borders](https://techieswithoutborders.us/)
-[CMES Project](https://cmesworld.org/){: .secondary-action }
+- [CMES Project](https://cmesworld.org/)
-{: .horizontal-wrapper }
+

_notes/dont-wake-sandie.md

@@ -16,5 +16,5 @@ UI development, artwork integration, and version control. There were so many
 moving parts, and I really aimed to get as much input for the gameplay design
 as I could from the team.
 
-[itch.io (play the game!)](https://bchendev.itch.io/dont-wake-sandie){: .primary-action }
+[Play the game on itch.io!](https://bchendev.itch.io/dont-wake-sandie)
-{: .horizontal-wrapper }
+

_notes/interchange.md

@@ -9,7 +9,7 @@ View routes, shuttle locations, and estimated arrival times in a sleek,
 easy-to-use interface. I built this app using SwiftUI, Node.js and Apollo
 GraphQL, with Redis as a primary storage mechanism.
 
-[Download on the App Store](https://apps.apple.com/us/app/interchange-college-commute/id6739968742){: .primary-action }
+- [Download on the App Store](https://apps.apple.com/us/app/interchange-college-commute/id6739968742)
-[Join the TestFlight](https://testflight.apple.com/join/HbuHfUgW){: .secondary-action }
+- [Join the TestFlight](https://testflight.apple.com/join/HbuHfUgW)
-[Website](https://interchange.bchen.dev/){: .secondary-action }
+- [Website](https://interchange.bchen.dev/)
-{: .horizontal-wrapper }
+

_notes/power-to-the-people.md

@@ -7,9 +7,9 @@ title: Power to the People
 **An iPhone app designed to make traffic stops safer for marginalized communities.** Record interactions with police, assign and text emergency contacts, and be informed of your rights. I worked in a student team of 4, including [David Sohn](https://www.linkedin.com/in/sohn-david/), [Jacob Zamore](https://www.linkedin.com/in/jacob-zamore/), and [Patrick Smith](https://www.linkedin.com/in/patrick-smith-ld/), to prototype and build a proof of concept in 36 hours. The app was selected for the **President's Pick award** at [CruzHacks 2024](https://cruzhacks.com/), the premier hackathon of UC Santa Cruz.
 
 
-[GitHub](https://github.com/brendan-ch/PowerToThePeople){: .primary-action }
+- [GitHub](https://github.com/brendan-ch/PowerToThePeople)
-[Devpost](https://devpost.com/software/power-to-the-people-lbhxyd){: .secondary-action }
+- [Devpost](https://devpost.com/software/power-to-the-people-lbhxyd)
-{: .horizontal-wrapper }
+
 
 My contribution was the iOS app prototype, of which a demo is shown below. I built the primary user flow of recording a police interaction, simultaneously using the front and back iPhone cameras to capture all angles. Activating the recording also displays the "Know Your Rights" screen, displaying basic dos and don'ts. Finally, I built a way to view previous recordings and share the files using the iOS share sheet.
 

_notes/sourcebook.md

@@ -12,5 +12,5 @@ I designed an entity-relationship diagram, MySQL database schema, and HTML/CSS
 high-fidelity prototype to support the project and show to professors. I then
 built a lightweight full-stack application using Python, Flask, and MySQL.
 
-[GitHub](https://github.com/brendan-ch/sourcebook){: .primary-action }
+[GitHub](https://github.com/brendan-ch/sourcebook)
-{: .horizontal-wrapper }
+

_notes/tad-pool.md

@@ -13,8 +13,11 @@ design using Figma and FigJam, in a period of 24 hours for
 
 The project reached the finalist judging stage.
 
-[High-fidelity design](https://www.figma.com/design/nTKCcwftKrg27wlP5mmy9e/Tad-Pool-Design?node-id=13-1837&node-type=canvas&t=YKuVvM6RAPs4hTIo-11){: .primary-action }
+- [High-fidelity design](https://www.figma.
-[Low-fidelity design](https://www.figma.com/design/nTKCcwftKrg27wlP5mmy9e/Tad-Pool-Design?node-id=0-1&node-type=canvas&t=YKuVvM6RAPs4hTIo-11){: .secondary-action }
+com/design/nTKCcwftKrg27wlP5mmy9e/Tad-Pool-Design?node-id=13-1837&node-type=canvas&t=YKuVvM6RAPs4hTIo-11)
-[FigJam board](https://www.figma.com/board/Dct7GuhKFYq8maw0KoAVBV/Product-Brainstorm-FullyBeyond?node-id=0-1&node-type=canvas&t=g7RKLLo5IoU84ndk-11){: .secondary-action }
+- [Low-fidelity design](https://www.figma.
-[Devpost](https://devpost.com/software/tad-pool){: .secondary-action }
+  com/design/nTKCcwftKrg27wlP5mmy9e/Tad-Pool-Design?node-id=0-1&node-type=canvas&t=YKuVvM6RAPs4hTIo-11)
-{: .horizontal-wrapper }
+- [FigJam board](https://www.figma.
+  com/board/Dct7GuhKFYq8maw0KoAVBV/Product-Brainstorm-FullyBeyond?node-id=0-1&node-type=canvas&t=g7RKLLo5IoU84ndk-11)
+- [Devpost](https://devpost.com/software/tad-pool)
+

_notes/teech-ai-cal-hacks-12.md

@@ -12,7 +12,7 @@ I built a native proof-of-concept using SwiftUI, AVFoundation, and other native
 
 The app was built in 48 hours for **Cal Hacks 12.0**, the world's largest collegiate hackathon.
 
-[GitHub](https://github.com/brendan-ch/teecher-ios){: .primary-action }
+- [GitHub](https://github.com/brendan-ch/teecher-ios)
-[Devpost](https://devpost.com/software/teech-ai){: .secondary-action }
+- [Devpost](https://devpost.com/software/teech-ai)
-[Cal Hacks](https://www.calhacks.io){: .secondary-action }
+- [Cal Hacks](https://www.calhacks.io)
-{: .horizontal-wrapper }
+

_notes/the-farmers-dog-trivia.md

@@ -14,5 +14,4 @@ screens for the app using React Native for Windows.
 for web/app development. He’s knowledgeable and efficient, and his task
 management skills make him an ideal project member." — Walter Cheng, project overseer
 
-[The Farmer’s Dog](https://thefarmersdog.com/){: .primary-action }
+[The Farmer’s Dog](https://thefarmersdog.com/)
-{: .horizontal-wrapper }

_notes/timestamp.md

@@ -6,6 +6,5 @@ title: Timestamp
 
 A simple, unintrusive Pomodoro timer for macOS which lives in the menu bar. I built it with SwiftUI and made it open source.
 
-[Download the app](https://github.com/brendan-ch/timestamp/releases){: .primary-action }
+[Download the app](https://github.com/brendan-ch/timestamp/releases)
-[View the code](https://github.com/brendan-ch/timestamp){: .secondary-action }
+[View the code](https://github.com/brendan-ch/timestamp)
-{: .horizontal-wrapper }

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 {
+.nav-title:hover {
-    display: flex;
+    color: unset;
-    align-items: center;
-    text-decoration: none;
-    color: var(--color-primary-1);
-}
-
-.nav-logo-icon {
-    height: 48px;
-    width: 48px;
 }
 
 .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;
-}