Merge pull request #4 from TaskBeacon/codex/update-webpage-style-to-match-furo-theme

zh1peng · web-flow · commit daae1950456e · 2025-06-13T08:17:10.000+08:00
Apply furo-inspired styling
diff --git a/css/style.css b/css/style.css
@@ -1,13 +1,16 @@
 :root {
-  --bg-color: #fdfdfd;
-  --text-color: #222;
+  /* Furo light theme colors */
+  --bg-color: #f8f9fb;
+  --text-color: #000;
   --header-bg: #fff;
-  --border-color: #eee;
+  --border-color: #eeebee;
   --card-bg: #fff;
+  --accent-color: #2962ff;
 }
 
 body {
-  font-family: 'Inter', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
   background: var(--bg-color);
   color: var(--text-color);
   margin: 0;
@@ -16,11 +19,13 @@ body {
 }
 
 body.dark {
-  --bg-color: #1d1e20;
-  --text-color: #eaeaea;
-  --header-bg: #2b2d31;
-  --border-color: #555;
-  --card-bg: #2b2d31;
+  /* Furo dark theme colors */
+  --bg-color: #1a1c1e;
+  --text-color: #ffffffcc;
+  --header-bg: #131416;
+  --border-color: #303335;
+  --card-bg: #18181a;
+  --accent-color: #2b8cee;
 }
 
 .header {
@@ -57,26 +62,31 @@ body.dark {
   border: none;
   font-size: 1rem;
   cursor: pointer;
+  color: var(--accent-color);
+}
+.nav button:hover {
+  text-decoration: underline;
 }
 
 h1, h2 {
-  font-family: 'Space Grotesk', cursive;
+  font-family: inherit;
 }
 
 .theme-toggle {
   font-size: 1.2rem;
   background: none;
   border: none;
   cursor: pointer;
-  color: inherit;
+  color: var(--accent-color);
 }
 
 .btn {
-  background-color: var(--text-color);
-  color: var(--bg-color);
-  border: 2px solid var(--border-color);
+  background-color: var(--accent-color);
+  color: var(--header-bg);
+  border: 2px solid var(--accent-color);
   padding: 0.5rem 1rem;
   cursor: pointer;
+  border-radius: 0.2rem;
 }
 
 .dropdown {
@@ -100,6 +110,14 @@ h1, h2 {
   color: var(--text-color);
 }
 
+a {
+  color: var(--accent-color);
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
 .hidden {
   display: none;
 }
@@ -117,7 +135,7 @@ h1, h2 {
   padding: 1rem;
   margin-bottom: 1.5rem;
   align-items: center;
-  border-radius: 6px;
+  border-radius: 0.2rem;
 }
 
 .card .icon {
diff --git a/future.html b/future.html
@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Future Directions - TaskBeacon</title>
   <link rel="stylesheet" href="css/style.css"/>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
   <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"/>
 </head>
 <body>
diff --git a/index.html b/index.html
@@ -7,7 +7,6 @@
 
   <!-- Fonts and Styles -->
   <link rel="stylesheet" href="css/style.css" />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
 </head>
 
diff --git a/taps.html b/taps.html
@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>TAPS - TaskBeacon</title>
   <link rel="stylesheet" href="css/style.css"/>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
   <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"/>
 </head>
 <body>
diff --git a/tasks.html b/tasks.html
@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Tasks - TaskBeacon</title>
   <link rel="stylesheet" href="css/style.css"/>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
   <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"/>
 </head>
 <body>
