Skip to content

Commit 0f2ad29

Browse files
localhost433localhost433
committed
Style changes
1 parent 25853ce commit 0f2ad29

13 files changed

Lines changed: 322 additions & 552 deletions

File tree

‎about.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>About - Robin's Site</title>
8-
<link rel="stylesheet" href="css/home.css" />
8+
<link rel="stylesheet" href="css/shared.css" />
9+
<link rel="stylesheet" href="css/about.css" />
910
<meta http-equiv="Content-Security-Policy" content="
1011
default-src 'self';
1112
script-src 'self' https://cdn.jsdelivr.net;
@@ -61,6 +62,7 @@ <h2>Tech Stack</h2>
6162

6263
<script src="js/theme.js"></script>
6364
<script src="js/header-footer.js"></script>
65+
<script src="js/about.js"></script>
6466
</body>
6567

6668
</html>

‎blog.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Blog – Robin's Site</title>
7+
8+
<link rel="stylesheet" href="css/shared.css"/>
9+
<link rel="stylesheet" href="css/blog.css"/>
10+
11+
<meta http-equiv="Content-Security-Policy"
12+
content="default-src 'self';
13+
script-src 'self' https://cdn.jsdelivr.net;
14+
connect-src 'self';
15+
style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net;
16+
font-src 'self' https://cdn.jsdelivr.net;
17+
img-src 'self' data:;">
18+
</head>
19+
20+
<body>
21+
<header id="header-placeholder"></header>
22+
23+
<!-- Tag filter shown ABOVE post list -->
24+
<section id="tag-filter">
25+
<strong>Filter by Tag:</strong>
26+
<div id="tag-buttons"></div>
27+
</section>
28+
29+
<section id="posts-list">
30+
<!-- Posts load here -->
31+
</section>
32+
33+
<footer id="footer-placeholder"></footer>
34+
35+
<script src="js/theme.js"></script>
36+
<script src="js/header-footer.js"></script>
37+
<script src="js/blog.js"></script>
38+
</body>
39+
</html>

‎components/header.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<div class="header-title">Robin's Site</div>
22
<nav>
3-
<a href="index.html">Home</a> |
4-
<a href="about.html">About</a> |
5-
<a href="post.html">Blog</a> |
6-
<a href="projects.html">Projects</a>
3+
<a href="index.html">Home</a> |
4+
<a href="about.html">About</a> |
5+
<a href="blog.html">Blog</a> | <!-- points to the new listing page -->
6+
<a href="projects.html">Projects</a>
77
</nav>
88
<div class="header-row">
9-
<p>Welcome! Sharing ideas, projects, school notes, and more.</p>
10-
<button id="theme-toggle">Dark Mode</button>
9+
<p>Welcome! Sharing ideas, projects, school notes, and more.</p>
10+
<button id="theme-toggle">Dark Mode</button>
1111
</div>
12-
</div>

‎css/blog.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* imports shared.css automatically through <link> order */
2+
#posts-list{ margin-top:2rem; }
3+
4+
.post-entry{
5+
display:flex; justify-content:space-between; flex-wrap:wrap;
6+
margin-bottom:1.6rem;
7+
}
8+
9+
.post-title{font-size:1.25rem; color:#0055aa;}
10+
.post-meta-inline{font-size:.85rem; color:#777;}
11+
12+
#tag-filter{margin-top:3rem;}

‎css/post.css‎

Lines changed: 31 additions & 261 deletions
Original file line numberDiff line numberDiff line change
@@ -1,267 +1,37 @@
1-
/* Shared Typography and Layout */
2-
html {
3-
box-sizing: border-box;
4-
font-size: 16px;
5-
6-
*,
7-
*::before,
8-
*::after {
9-
box-sizing: inherit;
10-
}
11-
12-
body {
13-
font-family: Georgia, 'Noto Serif', 'Noto Sans SC', 'Microsoft YaHei', 'Hiragino Sans GB', serif;
14-
background-color: #fff;
15-
color: #111;
16-
padding: 2.1rem;
17-
max-width: 800px;
18-
margin: auto;
19-
line-height: 1.8;
20-
}
21-
22-
a {
23-
color: #0044cc;
24-
text-decoration: none;
25-
font-weight: 600;
26-
}
27-
28-
a:hover,
29-
a:focus {
30-
text-decoration: underline;
31-
}
32-
33-
/* Header */
34-
header h1,
35-
.header-title {
36-
font-size: 2.1rem;
37-
color: #000;
38-
margin-bottom: 0.3rem;
39-
}
40-
41-
header p,
42-
.header-row p {
43-
font-size: 1.3rem;
44-
color: #444;
45-
margin: 0;
46-
}
47-
48-
.header-row {
49-
display: flex;
50-
justify-content: space-between;
51-
align-items: center;
52-
gap: 1rem;
53-
}
54-
55-
/* Post Listing */
56-
#posts-list {
57-
margin-top: 2.1rem;
58-
}
59-
60-
.post-entry {
61-
margin-bottom: 2.1rem;
62-
}
63-
64-
.post-entry a {
65-
font-size: 1.3rem;
66-
}
67-
68-
.post-meta,
69-
.post-date {
70-
font-size: 0.9rem;
71-
color: #777;
72-
}
73-
74-
.post-date::after {
75-
content: " •";
76-
padding: 0 0.4rem;
77-
}
78-
79-
.post-author {
80-
color: #444;
81-
}
82-
83-
/* Individual Post */
84-
article {
85-
margin-top: 3.4rem;
86-
}
87-
88-
article h1,
89-
article h2 {
90-
color: #000;
91-
margin: 1.3rem 0;
92-
}
93-
94-
article p {
95-
margin-bottom: 1.3rem;
96-
}
97-
98-
/* Back Link */
99-
.back-link {
100-
display: block;
101-
margin-top: 2.1rem;
102-
color: #555;
103-
}
104-
105-
/* Dark Mode */
106-
.dark-mode body {
107-
background-color: #0e0e0e;
108-
color: #f1f1f1;
109-
}
110-
111-
.dark-mode a {
112-
color: #88aaff;
113-
}
114-
115-
.dark-mode header h1,
116-
.dark-mode article h1,
117-
.dark-mode article h2,
118-
.dark-mode .header-title {
119-
color: #fff;
120-
}
121-
122-
.dark-mode header p,
123-
.dark-mode .header-row p,
124-
.dark-mode .post-meta,
125-
.dark-mode .post-date,
126-
.dark-mode .back-link {
127-
color: #ccc;
128-
}
129-
130-
/*Tags*/
131-
.tags-container {
132-
margin-top: 0.5rem;
133-
}
134-
135-
.post-tag {
136-
display: inline-block;
137-
background-color: #eef;
138-
color: #336;
139-
font-size: 0.75rem;
140-
padding: 0.2rem 0.5rem;
141-
border-radius: 0.5rem;
142-
margin-right: 0.4rem;
143-
margin-top: 0.4rem;
144-
}
145-
146-
.dark-mode .post-tag {
147-
background-color: #223;
148-
color: #ccf;
149-
}
150-
151-
#tag-filter {
152-
margin-bottom: 2rem;
153-
}
154-
155-
#tag-buttons {
156-
margin-top: 0.5rem;
157-
}
158-
159-
.tag-button {
160-
background-color: #ddeeff;
161-
border: none;
162-
border-radius: 0.5rem;
163-
padding: 0.4rem 0.8rem;
164-
margin: 0.2rem;
165-
font-size: 0.85rem;
166-
cursor: pointer;
167-
}
168-
169-
.tag-button:hover {
170-
background-color: #ccddee;
171-
}
172-
173-
.dark-mode .tag-button {
174-
background-color: #334455;
175-
color: #ddeeff;
176-
}
177-
178-
.dark-mode .tag-button:hover {
179-
background-color: #445566;
180-
}
181-
182-
/* Theme Toggle */
183-
#theme-toggle {
184-
background: none;
185-
border: none;
186-
font-family: inherit;
187-
font-size: 1rem;
188-
padding: 0.3rem 0.8rem;
189-
border-radius: 0.5rem;
190-
cursor: pointer;
191-
color: inherit;
192-
white-space: nowrap;
193-
}
194-
#theme-toggle:hover,
195-
#theme-toggle:focus {
196-
background-color: rgba(0, 0, 0, 0.05);
197-
}
198-
}
199-
200-
.dark-mode #theme-toggle:hover {
201-
background-color: rgba(255, 255, 255, 0.1);
202-
}
203-
204-
#comments-section {
205-
margin-top: 3rem;
206-
padding: 1.5rem;
207-
background: #f9f9f9;
208-
border-radius: 1rem;
209-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
210-
}
211-
212-
.dark-mode #comments-section {
213-
background: #1f1f1f;
214-
}
215-
216-
#comments-list p {
217-
background: #eef;
218-
padding: 0.8rem 1.2rem;
219-
border-radius: 1rem;
220-
margin-bottom: 1.5rem;
221-
font-size: 1rem;
222-
word-break: break-word;
223-
border-left: 4px solid #3366ff;
224-
}
225-
226-
.dark-mode #comments-list p {
227-
background: #223;
228-
color: #ddeeff;
229-
border-left: 4px solid #88aaff;
230-
}
231-
232-
#comment-form {
233-
margin-top: 2rem;
234-
display: flex;
235-
flex-direction: column;
236-
}
237-
1+
/* relies on shared.css first */
2+
article{margin-top:3rem;}
3+
article h1{margin:1.5rem 0; font-size:1.9rem;}
4+
.post-meta{font-size:.9rem; color:#777; margin-bottom:1.5rem;}
5+
6+
/* --- comment section ------------------------------------------------- */
7+
#comments-section{
8+
margin-top:3rem; padding:1.6rem;
9+
background:#f9f9f9; border-radius:1rem;
10+
box-shadow:0 2px 6px rgba(0,0,0,.08);
11+
}
12+
#comments-list p{
13+
background:#eef; padding:.9rem 1.2rem; border-radius:1rem;
14+
margin-bottom:1.2rem; border-left:4px solid #3366ff;
15+
}
16+
#comment-form{margin-top:1.5rem; display:flex; flex-direction:column;}
23817
#comment-form textarea,
239-
#comment-form input[type="text"] {
240-
font-size: 1rem;
241-
margin-bottom: 1rem;
242-
padding: 0.75rem;
243-
border-radius: 0.5rem;
244-
border: 1px solid #ccc;
18+
#comment-form input[type=text]{
19+
font-size:1rem; padding:.8rem; margin-bottom:1rem;
20+
border-radius:.6rem; border:1px solid #ccc;
24521
}
246-
247-
.dark-mode #comment-form textarea,
248-
.dark-mode #comment-form input[type="text"] {
249-
background: #222;
250-
color: #eee;
251-
border: 1px solid #555;
22+
#comment-form button{
23+
align-self:flex-start; padding:.75rem 1.6rem;
24+
background:#3366ff; color:#fff; border:none; border-radius:.5rem;
25+
cursor:pointer; font-size:1rem;
25226
}
27+
#comment-form button:hover{background:#254eda;}
25328

254-
#comment-form button {
255-
padding: 0.75rem 1.5rem;
256-
background: #3366ff;
257-
color: white;
258-
border: none;
259-
border-radius: 0.5rem;
260-
cursor: pointer;
261-
font-size: 1rem;
262-
width: fit-content;
29+
/* dark-mode */
30+
.dark-mode #comments-section{background:#1f1f1f;}
31+
.dark-mode #comments-list p{
32+
background:#334; color:#ddeeff; border-left:4px solid #88aaff;
26333
}
264-
265-
#comment-form button:hover {
266-
background: #254eda;
34+
.dark-mode #comment-form textarea,
35+
.dark-mode #comment-form input[type=text]{
36+
background:#222; color:#eee; border:1px solid #555;
26737
}

0 commit comments

Comments
 (0)