Remove the custom link styling and add an accent color

2026-08-08 21:40:09 -04:00
parent fb13a0952e
commit a982dfaba9
13 changed files with 44 additions and 210 deletions
--- a/_notes/cmes-mobile.md
+++ b/_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 }
-[Google Play](https://play.google.com/store/apps/details?id=org.cmesworld.www.cmes_piandroid_app){: .primary-action }
-[Techies Without Borders](https://techieswithoutborders.us/){: .secondary-action }
-[CMES Project](https://cmesworld.org/){: .secondary-action }
-{: .horizontal-wrapper }
+- [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)
+- [Techies Without Borders](https://techieswithoutborders.us/)
+- [CMES Project](https://cmesworld.org/)
+
--- a/_notes/dont-wake-sandie.md
+++ b/_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 }
-{: .horizontal-wrapper }
+[Play the game on itch.io!](https://bchendev.itch.io/dont-wake-sandie)
+
--- a/_notes/interchange.md
+++ b/_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 }
-[Join the TestFlight](https://testflight.apple.com/join/HbuHfUgW){: .secondary-action }
-[Website](https://interchange.bchen.dev/){: .secondary-action }
-{: .horizontal-wrapper }
+- [Download on the App Store](https://apps.apple.com/us/app/interchange-college-commute/id6739968742)
+- [Join the TestFlight](https://testflight.apple.com/join/HbuHfUgW)
+- [Website](https://interchange.bchen.dev/)
+
--- a/_notes/power-to-the-people.md
+++ b/_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 }
-[Devpost](https://devpost.com/software/power-to-the-people-lbhxyd){: .secondary-action }
-{: .horizontal-wrapper }
+- [GitHub](https://github.com/brendan-ch/PowerToThePeople)
+- [Devpost](https://devpost.com/software/power-to-the-people-lbhxyd)
+

 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.

--- a/_notes/sourcebook.md
+++ b/_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 }
-{: .horizontal-wrapper }
+[GitHub](https://github.com/brendan-ch/sourcebook)
+
--- a/_notes/tad-pool.md
+++ b/_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 }
-[Low-fidelity design](https://www.figma.com/design/nTKCcwftKrg27wlP5mmy9e/Tad-Pool-Design?node-id=0-1&node-type=canvas&t=YKuVvM6RAPs4hTIo-11){: .secondary-action }
-[FigJam board](https://www.figma.com/board/Dct7GuhKFYq8maw0KoAVBV/Product-Brainstorm-FullyBeyond?node-id=0-1&node-type=canvas&t=g7RKLLo5IoU84ndk-11){: .secondary-action }
-[Devpost](https://devpost.com/software/tad-pool){: .secondary-action }
-{: .horizontal-wrapper }
+- [High-fidelity design](https://www.figma.
+com/design/nTKCcwftKrg27wlP5mmy9e/Tad-Pool-Design?node-id=13-1837&node-type=canvas&t=YKuVvM6RAPs4hTIo-11)
+- [Low-fidelity design](https://www.figma.
+  com/design/nTKCcwftKrg27wlP5mmy9e/Tad-Pool-Design?node-id=0-1&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)
+- [Devpost](https://devpost.com/software/tad-pool)
+
--- a/_notes/teech-ai-cal-hacks-12.md
+++ b/_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 }
-[Devpost](https://devpost.com/software/teech-ai){: .secondary-action }
-[Cal Hacks](https://www.calhacks.io){: .secondary-action }
-{: .horizontal-wrapper }
+- [GitHub](https://github.com/brendan-ch/teecher-ios)
+- [Devpost](https://devpost.com/software/teech-ai)
+- [Cal Hacks](https://www.calhacks.io)
+
--- a/_notes/the-farmers-dog-trivia.md
+++ b/_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 }
-{: .horizontal-wrapper }
+[The Farmer’s Dog](https://thefarmersdog.com/)
--- a/_notes/timestamp.md
+++ b/_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 }
-[View the code](https://github.com/brendan-ch/timestamp){: .secondary-action }
-{: .horizontal-wrapper }
+[Download the app](https://github.com/brendan-ch/timestamp/releases)
+[View the code](https://github.com/brendan-ch/timestamp)
--- a/assets/css/colors.css
+++ b/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;
    }
 }

--- a/assets/css/content.css
+++ b/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;
-    }
-}
--- a/assets/css/global.css
+++ b/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 */
--- a/assets/css/navigation.css
+++ b/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;
-}