Skip to content

Commit d7b9efa

Browse files
zh1pengzh1peng
committed
Add pixel style and theme toggle
1 parent 486d4b8 commit d7b9efa

File tree

7 files changed

+139
-55
lines changed

7 files changed

+139
-55
lines changed

‎css/style.css‎

Lines changed: 57 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,55 @@
1+
:root {
2+
--bg-color: #fdfdfd;
3+
--text-color: #222;
4+
--header-bg: #fff;
5+
--border-color: #eee;
6+
--card-bg: #fff;
7+
}
8+
19
body {
210
font-family: 'Inter', sans-serif;
3-
background: #fdfdfd;
4-
color: #222;
11+
background: var(--bg-color);
12+
color: var(--text-color);
513
margin: 0;
614
padding: 0;
15+
transition: background 0.3s, color 0.3s;
16+
}
17+
18+
body.dark {
19+
--bg-color: #1d1e20;
20+
--text-color: #eaeaea;
21+
--header-bg: #2b2d31;
22+
--border-color: #555;
23+
--card-bg: #2b2d31;
724
}
825

926
.header {
1027
display: flex;
1128
justify-content: space-between;
1229
align-items: center;
1330
padding: 1rem 2rem;
14-
background: #fff;
15-
border-bottom: 2px solid #eee;
31+
background: var(--header-bg);
32+
border-bottom: 2px solid var(--border-color);
1633
}
1734

1835
.logo {
1936
display: flex;
2037
align-items: center;
2138
font-weight: 700;
2239
font-size: 1.5rem;
40+
font-family: 'Press Start 2P', cursive;
2341
}
2442

2543
.logo-icon {
2644
margin-right: 10px;
2745
font-size: 32px;
46+
image-rendering: pixelated;
47+
}
48+
49+
.header-actions {
50+
display: flex;
51+
align-items: center;
52+
gap: 1rem;
2853
}
2954

3055
.nav button {
@@ -34,11 +59,31 @@ body {
3459
cursor: pointer;
3560
}
3661

62+
h1, h2 {
63+
font-family: 'Press Start 2P', cursive;
64+
}
65+
66+
.theme-toggle {
67+
font-size: 1.2rem;
68+
background: none;
69+
border: none;
70+
cursor: pointer;
71+
color: inherit;
72+
}
73+
74+
.btn {
75+
background-color: var(--text-color);
76+
color: var(--bg-color);
77+
border: 2px solid var(--border-color);
78+
padding: 0.5rem 1rem;
79+
cursor: pointer;
80+
}
81+
3782
.dropdown {
3883
position: absolute;
39-
background: white;
84+
background: var(--card-bg);
4085
list-style: none;
41-
border: 1px solid #ddd;
86+
border: 1px solid var(--border-color);
4287
margin-top: 10px;
4388
padding: 0;
4489
right: 2rem;
@@ -47,12 +92,12 @@ body {
4792

4893
.dropdown li {
4994
padding: 0.5rem 1rem;
50-
border-bottom: 1px solid #eee;
95+
border-bottom: 1px solid var(--border-color);
5196
}
5297

5398
.dropdown li a {
5499
text-decoration: none;
55-
color: #222;
100+
color: var(--text-color);
56101
}
57102

58103
.hidden {
@@ -67,8 +112,8 @@ body {
67112

68113
.card {
69114
display: flex;
70-
background: #fff;
71-
border: 1px solid #ddd;
115+
background: var(--card-bg);
116+
border: 1px solid var(--border-color);
72117
padding: 1rem;
73118
margin-bottom: 1.5rem;
74119
align-items: center;
@@ -78,6 +123,7 @@ body {
78123
.card .icon {
79124
font-size: 48px;
80125
margin-right: 1.2rem;
126+
image-rendering: pixelated;
81127
}
82128

83129
.card h2 {
@@ -102,4 +148,5 @@ body {
102148
font-size: 64px;
103149
display: block;
104150
margin-bottom: 0.5rem;
151+
image-rendering: pixelated;
105152
}

‎future.html‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,26 @@
66
<title>Future Directions - TaskBeacon</title>
77
<link rel="stylesheet" href="css/style.css"/>
88
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
9+
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"/>
910
</head>
1011
<body>
1112
<header class="header">
1213
<div class="logo">
1314
<span class="logo-icon" role="img" aria-label="Beacon">📡</span>
1415
<span>TaskBeacon</span>
1516
</div>
16-
<nav class="nav">
17-
<button id="menu-button">Menu ▾</button>
18-
<ul class="dropdown hidden" id="dropdown-menu">
19-
<li><a href="index.html">Home</a></li>
20-
<li><a href="taps.html">TAPS</a></li>
21-
<li><a href="psyflow.html">PsyFlow</a></li>
22-
<li><a href="tasks.html">Tasks</a></li>
23-
</ul>
24-
</nav>
17+
<div class="header-actions">
18+
<nav class="nav">
19+
<button id="menu-button">Menu ▾</button>
20+
<ul class="dropdown hidden" id="dropdown-menu">
21+
<li><a href="index.html">Home</a></li>
22+
<li><a href="taps.html">TAPS</a></li>
23+
<li><a href="psyflow.html">PsyFlow</a></li>
24+
<li><a href="tasks.html">Tasks</a></li>
25+
</ul>
26+
</nav>
27+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">🌙</button>
28+
</div>
2529
</header>
2630

2731
<main class="container">
@@ -30,5 +34,6 @@ <h1>Future Directions</h1>
3034
</main>
3135

3236
<script src="js/menu.js"></script>
37+
<script src="js/theme.js"></script>
3338
</body>
3439
</html>

‎index.html‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,18 @@
1717
<span class="logo-icon" role="img" aria-label="Beacon">📡</span>
1818
<span>TaskBeacon</span>
1919
</div>
20-
<nav class="nav">
21-
<button id="menu-button">Menu ▾</button>
22-
<ul class="dropdown hidden" id="dropdown-menu">
23-
<li><a href="taps.html">TAPS</a></li>
24-
<li><a href="psyflow.html">PsyFlow</a></li>
25-
<li><a href="tasks.html">Tasks</a></li>
26-
<li><a href="future.html">Future Directions</a></li>
27-
</ul>
28-
</nav>
20+
<div class="header-actions">
21+
<nav class="nav">
22+
<button id="menu-button">Menu ▾</button>
23+
<ul class="dropdown hidden" id="dropdown-menu">
24+
<li><a href="taps.html">TAPS</a></li>
25+
<li><a href="psyflow.html">PsyFlow</a></li>
26+
<li><a href="tasks.html">Tasks</a></li>
27+
<li><a href="future.html">Future Directions</a></li>
28+
</ul>
29+
</nav>
30+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">🌙</button>
31+
</div>
2932
</header>
3033

3134
<main class="container">
@@ -99,6 +102,7 @@ <h3>Zhipeng Wen</h3>
99102

100103
<!-- Scripts -->
101104
<script src="js/menu.js"></script>
105+
<script src="js/theme.js"></script>
102106
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
103107
<script>
104108
const converter = new showdown.Converter();

‎js/theme.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const toggle = document.getElementById('theme-toggle');
2+
if (toggle) {
3+
const stored = localStorage.getItem('theme');
4+
if (stored === 'dark') {
5+
document.body.classList.add('dark');
6+
toggle.textContent = '☀️';
7+
}
8+
toggle.addEventListener('click', () => {
9+
const isDark = document.body.classList.toggle('dark');
10+
toggle.textContent = isDark ? '☀️' : '🌙';
11+
localStorage.setItem('theme', isDark ? 'dark' : 'light');
12+
});
13+
}

‎psyflow.html‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,26 @@
66
<title>PsyFlow - TaskBeacon</title>
77
<link rel="stylesheet" href="css/style.css"/>
88
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
9+
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"/>
910
</head>
1011
<body>
1112
<header class="header">
1213
<div class="logo">
1314
<span class="logo-icon" role="img" aria-label="Beacon">📡</span>
1415
<span>TaskBeacon</span>
1516
</div>
16-
<nav class="nav">
17-
<button id="menu-button">Menu ▾</button>
18-
<ul class="dropdown hidden" id="dropdown-menu">
19-
<li><a href="index.html">Home</a></li>
20-
<li><a href="taps.html">TAPS</a></li>
21-
<li><a href="tasks.html">Tasks</a></li>
22-
<li><a href="future.html">Future Directions</a></li>
23-
</ul>
24-
</nav>
17+
<div class="header-actions">
18+
<nav class="nav">
19+
<button id="menu-button">Menu ▾</button>
20+
<ul class="dropdown hidden" id="dropdown-menu">
21+
<li><a href="index.html">Home</a></li>
22+
<li><a href="taps.html">TAPS</a></li>
23+
<li><a href="tasks.html">Tasks</a></li>
24+
<li><a href="future.html">Future Directions</a></li>
25+
</ul>
26+
</nav>
27+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">🌙</button>
28+
</div>
2529
</header>
2630

2731
<main class="container">
@@ -30,5 +34,6 @@ <h1>PsyFlow</h1>
3034
</main>
3135

3236
<script src="js/menu.js"></script>
37+
<script src="js/theme.js"></script>
3338
</body>
3439
</html>

‎taps.html‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,26 @@
66
<title>TAPS - TaskBeacon</title>
77
<link rel="stylesheet" href="css/style.css"/>
88
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
9+
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"/>
910
</head>
1011
<body>
1112
<header class="header">
1213
<div class="logo">
1314
<span class="logo-icon" role="img" aria-label="Beacon">📡</span>
1415
<span>TaskBeacon</span>
1516
</div>
16-
<nav class="nav">
17-
<button id="menu-button">Menu ▾</button>
18-
<ul class="dropdown hidden" id="dropdown-menu">
19-
<li><a href="index.html">Home</a></li>
20-
<li><a href="psyflow.html">PsyFlow</a></li>
21-
<li><a href="tasks.html">Tasks</a></li>
22-
<li><a href="future.html">Future Directions</a></li>
23-
</ul>
24-
</nav>
17+
<div class="header-actions">
18+
<nav class="nav">
19+
<button id="menu-button">Menu ▾</button>
20+
<ul class="dropdown hidden" id="dropdown-menu">
21+
<li><a href="index.html">Home</a></li>
22+
<li><a href="psyflow.html">PsyFlow</a></li>
23+
<li><a href="tasks.html">Tasks</a></li>
24+
<li><a href="future.html">Future Directions</a></li>
25+
</ul>
26+
</nav>
27+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">🌙</button>
28+
</div>
2529
</header>
2630

2731
<main class="container">
@@ -30,5 +34,6 @@ <h1>TAPS</h1>
3034
</main>
3135

3236
<script src="js/menu.js"></script>
37+
<script src="js/theme.js"></script>
3338
</body>
3439
</html>

‎tasks.html‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,26 @@
66
<title>Tasks - TaskBeacon</title>
77
<link rel="stylesheet" href="css/style.css"/>
88
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"/>
9+
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"/>
910
</head>
1011
<body>
1112
<header class="header">
1213
<div class="logo">
1314
<span class="logo-icon" role="img" aria-label="Beacon">📡</span>
1415
<span>TaskBeacon</span>
1516
</div>
16-
<nav class="nav">
17-
<button id="menu-button">Menu ▾</button>
18-
<ul class="dropdown hidden" id="dropdown-menu">
19-
<li><a href="index.html">Home</a></li>
20-
<li><a href="taps.html">TAPS</a></li>
21-
<li><a href="psyflow.html">PsyFlow</a></li>
22-
<li><a href="future.html">Future Directions</a></li>
23-
</ul>
24-
</nav>
17+
<div class="header-actions">
18+
<nav class="nav">
19+
<button id="menu-button">Menu ▾</button>
20+
<ul class="dropdown hidden" id="dropdown-menu">
21+
<li><a href="index.html">Home</a></li>
22+
<li><a href="taps.html">TAPS</a></li>
23+
<li><a href="psyflow.html">PsyFlow</a></li>
24+
<li><a href="future.html">Future Directions</a></li>
25+
</ul>
26+
</nav>
27+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">🌙</button>
28+
</div>
2529
</header>
2630

2731
<main class="container">
@@ -30,6 +34,7 @@ <h1>Tasks</h1>
3034
</main>
3135

3236
<script src="js/menu.js"></script>
37+
<script src="js/theme.js"></script>
3338
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
3439
<script>
3540
const converter = new showdown.Converter();

0 commit comments

Comments
 (0)