Skip to content

Commit 654e3b4

Browse files
localhost433localhost433
committed
Updated CSS Structure
1 parent 8b30cc6 commit 654e3b4

7 files changed

Lines changed: 255 additions & 369 deletions

File tree

‎css/blog.css‎

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,33 @@
1-
#posts-list {
2-
margin-top: 2rem;
3-
}
4-
5-
/* stack things vertically */
6-
.post-entry {
7-
margin-bottom: 1.6rem;
8-
}
1+
/* ==========================================================================
2+
BLOG LISTING PAGE
3+
========================================================================== */
94

10-
.post-title {
5+
/* Remove default list spacing */
6+
#posts-list {
7+
margin-top: 0;
8+
}
9+
10+
/* Stack each entry vertically */
11+
.post-entry {
12+
margin-bottom: 1.5rem;
13+
}
14+
15+
/* Title & Meta */
16+
.post-title {
1117
display: block;
12-
font-size: 1.25rem;
18+
font-size: 1.5rem;
1319
color: #0055aa;
1420
margin-bottom: 0.25rem;
15-
}
16-
17-
.post-meta-inline {
21+
}
22+
.post-meta-inline {
1823
display: block;
19-
font-size: 0.85rem;
24+
font-size: 0.9rem;
2025
color: #777;
2126
margin-bottom: 0.5rem;
22-
}
23-
24-
/* if you still render tags on the list page */
25-
.tags-container {
26-
margin-top: 0.3rem;
27-
}
28-
29-
#tag-filter {
30-
margin-top: 3rem;
31-
}
32-
33-
.dark-mode,
34-
.dark-mode body {
35-
background-color: #0e0e0e;
36-
color: #f1f1f1;
37-
}
38-
39-
.dark-mode a {
40-
color: #88aaff;
41-
}
27+
}
28+
29+
/* Tag row under each entry */
30+
.tags-container {
31+
margin-top: 0.5rem;
32+
}
33+

‎css/home.css‎

Lines changed: 8 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,167 +1,11 @@
1-
/* General Styles */
2-
body {
3-
font-family: Georgia, 'Noto Serif', 'Noto Sans SC', 'Microsoft YaHei', 'Hiragino Sans GB', serif;
4-
background-color: #f9f9f9;
5-
color: #333;
6-
padding: 2rem;
7-
max-width: 800px;
8-
margin: auto;
9-
line-height: 1.8;
10-
}
11-
12-
a {
13-
color: #0055aa;
14-
text-decoration: none;
15-
font-weight: 600;
16-
}
17-
18-
a:hover,
19-
a:focus {
20-
text-decoration: underline;
21-
}
22-
23-
/* Header */
24-
header h1,
25-
.header-title {
26-
font-size: 2rem;
27-
color: #000;
28-
margin-bottom: 0.5rem;
29-
}
30-
31-
header p,
32-
.header-row p {
33-
font-size: 1.2rem;
34-
color: #555;
35-
margin-bottom: 1rem;
36-
}
37-
38-
.header-row {
39-
display: flex;
40-
justify-content: space-between;
41-
align-items: center;
42-
gap: 1rem;
43-
}
44-
45-
/* Post Listing */
46-
#posts-list {
47-
margin-top: 2rem;
48-
}
49-
50-
.post-entry {
51-
display: flex;
52-
justify-content: space-between;
53-
align-items: center;
54-
margin-bottom: 1.5rem;
55-
flex-wrap: wrap;
56-
}
57-
58-
.post-entry a {
59-
font-size: 1.2rem;
60-
}
61-
62-
.post-date,
63-
.post-meta {
64-
font-size: 0.85rem;
65-
color: #777;
66-
}
67-
68-
.post-date::after {
69-
content: " •";
70-
padding: 0 0.4rem;
71-
}
72-
73-
.post-author {
74-
color: #555;
75-
}
76-
77-
.post-title {
78-
font-weight: bold;
79-
font-size: 1.2rem;
80-
color: #0055aa;
81-
text-decoration: none;
82-
}
1+
/* ==========================================================================
2+
HOME PAGE STYLES
3+
========================================================================== */
834

84-
.post-title:hover {
85-
text-decoration: underline;
86-
}
87-
88-
.post-meta-inline {
89-
font-size: 0.85rem;
90-
color: #777;
91-
margin-left: 1rem;
92-
}
93-
94-
/* Individual Post */
95-
article {
96-
margin-top: 3rem;
97-
}
98-
99-
article h1,
100-
article h2 {
101-
color: #000;
102-
margin: 1.5rem 0;
103-
}
104-
105-
article p {
106-
margin-bottom: 1.2rem;
107-
}
108-
109-
/* Back Link */
110-
.back-link {
111-
display: block;
112-
margin-top: 2rem;
5+
/* Intro paragraph under the header */
6+
.home-intro {
7+
font-size: 1.3rem;
1138
color: #555;
9+
margin-bottom: 2rem;
10+
text-align: center;
11411
}
115-
116-
/* Theme Toggle */
117-
#theme-toggle {
118-
background: none;
119-
border: none;
120-
font-family: inherit;
121-
font-size: 1rem;
122-
padding: 0.3rem 0.8rem;
123-
border-radius: 0.5rem;
124-
cursor: pointer;
125-
color: inherit;
126-
white-space: nowrap;
127-
}
128-
129-
#theme-toggle:hover {
130-
background-color: rgba(0, 0, 0, 0.05);
131-
}
132-
133-
.dark-mode #theme-toggle:hover {
134-
background-color: rgba(255, 255, 255, 0.1);
135-
}
136-
137-
/* Dark Mode */
138-
.dark-mode body {
139-
background-color: #0e0e0e;
140-
color: #f1f1f1;
141-
}
142-
143-
.dark-mode a {
144-
color: #88aaff;
145-
}
146-
147-
.dark-mode header h1,
148-
.dark-mode article h1,
149-
.dark-mode article h2,
150-
.dark-mode .header-title {
151-
color: #ffffff;
152-
}
153-
154-
.dark-mode header p,
155-
.dark-mode .header-row p {
156-
color: #cccccc;
157-
}
158-
159-
.dark-mode .post-date,
160-
.dark-mode .post-meta,
161-
.dark-mode .back-link {
162-
color: #bbbbbb;
163-
}
164-
165-
.dark-mode .post-meta-inline {
166-
color: #bbbbbb;
167-
}

‎css/post.css‎

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,44 @@
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;}
1+
/* ==========================================================================
2+
INDIVIDUAL POST PAGE
3+
========================================================================== */
54

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;}
17-
#comment-form textarea,
18-
#comment-form input[type=text]{
19-
font-size:1rem; padding:.8rem; margin-bottom:1rem;
20-
border-radius:.6rem; border:1px solid #ccc;
21-
}
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;
26-
}
27-
#comment-form button:hover{background:#254eda;}
5+
/* Article content */
6+
article#post-content {
7+
margin-top: 2rem;
8+
}
9+
article#post-content h1 {
10+
font-size: 2rem;
11+
margin-bottom: 0.5rem;
12+
}
13+
article#post-content .post-meta {
14+
font-size: 0.9rem;
15+
color: #777;
16+
margin-bottom: 1.5rem;
17+
}
18+
19+
/* Tags under the post title */
20+
.tags-container {
21+
margin-top: 1rem;
22+
}
2823

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;
33-
}
34-
.dark-mode #comment-form textarea,
35-
.dark-mode #comment-form input[type=text]{
36-
background:#222; color:#eee; border:1px solid #555;
24+
/* Comments section */
25+
#comments-section {
26+
margin-top: 3rem;
27+
padding: 1.5rem;
28+
background-color: #f9f9f9;
29+
border-radius: 1rem;
30+
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
31+
}
32+
#comments-list p {
33+
background-color: #eef;
34+
padding: 0.8rem 1.2rem;
35+
border-radius: 1rem;
36+
margin-bottom: 1rem;
37+
border-left: 4px solid #3366ff;
38+
}
39+
#comment-form {
40+
margin-top: 1.5rem;
41+
}
42+
#comment-form button {
43+
align-self: flex-start;
3744
}

0 commit comments

Comments
 (0)